Top NOT top?


Joined
Feb 13, 2021
Messages
3
Reaction score
0
Hi all,

This is a question for which I cannot find an answer online - yet!

I have a simple HTML document, with a linked CSS file. The HTML contains a grid with top: 0px; yet there is a gap between the grid and the top of the browser window when rendered. Can anyone explain why top is NOT top?

<!DOCTYPE html>
<html>
<head>
<title>Trial webpage</title>
<link rel="stylesheet" href="css/trialcss.css">
</head>
<body>
<div class="gridheader">
</div>
</body>
</html>

* {
box-sizing: border-box;
}

body {
width: 100%;
margin-left:auto;
margin-right:auto;
background-color: green;
}

.gridheader {
position: -webkit-sticky;
position: sticky;
background-color: white; /*Having a background color is vital for the sticky header to look good*/
border-style: solid; /*Just for guidence purposes*/
border-color: white;
display: grid; /*Display as a grid*/
grid-gap: 5px;
padding: 5px;
grid-template-columns: 300px 1fr 1fr; /*Set the column widths: 1fr = 1 fraction*/
grid-template-areas: /*Name areas and set layout*/
'logo logo cta'
'menu menu menu'
'spacer spacer spacer';
}

Screenshot:
1613225301449.png


Thanks in advance,

Dermot
 
Ad

Advertisements

Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top