Fixed element has a gap above it, despite margin 0 and padding 0


#1

I’m practicing what I’ve learned from the html and css courses by building myself a website. At the top of the site, I want to have a navigation bar that always displays at the top and does not scroll with the page. However, when I create this in css, there is a gap of about 30px above the bar, and a gap of a few px to the left as well.

Here’s my css for it:

div.navigate {
	text-align: center;
	font-size: 16px;
	height: 32px;
	position: fixed;
	width: 100%;
	z-index: 10;
	background-color: #6495ED;
	padding: 0;
	margin: 0;
}

I suppose I could get rid of this gap by assigning negative padding, but I feel like I’m missing something here. Why is that gap showing up in the first place? If I add negative padding, might that cause any other issues?


#2

the different elements on the page influence each other, to say what caused the gap is really difficult without the full html and css code

please post full html and css code


#3

full html:

<html lang="en-US">

<head>
	<title>Geoffrey Taucer</title>
	<link href=style.css rel=stylesheet type=text/css>
</head>
<body>
	<div class="navigate">
		<a href=#top>Back to top</a>
		<a href=#webdev>Web Development</a>
		<a href=#music>Music</a>
		<a href=#juggling>Juggling</a>
	</div>
	<div id="top">
		<h1>Geoffrey Taucer</h1>
	</div>
	<div>
		<h2>Welcome</h2>
		<p>Right now, this is just a sandbox for testing. Eventually, this will become my website, listing my skills and demonstrating my ability to create a site that is both functional and visually appealing.</p>
	</div>
	<div>
		<h2>Things I intend to so on this site:</h2>
		<p><em>Tasks I've completed are displayed in <font color=blue>blue</font>. Tasks I have not completed are displayed in <font color=red>red</font>.</em></p>
		<ul>
			<li class="complete">Create basic website</li>
			<li class="complete">Acquire domain at "geoffreytaucer.com"</li>
			<li class="incomplete">Nav bar (need to get it all the way at the top; right now it has a gap above it, and I'm not sure why)</li>
			<li class="incomplete">Top banner (currently just text; needs to be something more interesting)</li>
			<li class="incomplete">Make everything look prettier</li>
			<li class="incomplete">Learn to implement a mobile version</li>
			<li class="incomplete">Find hosting</li>
			<li class="incomplete">Add resume</li>
			<li class="incomplete">Think of more stuff to add, so that the page has to scroll (to demonstrate floating nav bar)</li>
			<li class="incomplete">Add pages for juggling and music</li>
			<li class="incomplete">Add content to juggling and music pages</li>
			<li class="incomplete">Develop a portfolio of projects (links to other designed websites, etc), create a page for it</li>
		</ul>
	</div>
	<div id="webdev">
		<h2>Web Development</h2>
		<p>This section will have links to my web development portfolio. Right now, it's just a test of the nav bar's functionality</p>
	</div>
	<div id="music">
		<h2>Music</h2>
		<p>This section will showcase some of my musical work, including both original tracks and remixes. Odds are I'll include an embedded soundcloud player, or something like that. Either that, or a table or grid of some sort that has my work. At the moment, though, this section is just here to test the nav bar functionality; once I really get the site set up the way I want to, I'll probably move this to a separate page.</p>
	</div>
	<div id="juggling">
		<h2>Juggling</h2>
		<p>This section will highlight my juggling videos and tutorials. It will include links to my youtube channel and my patreon page. Eventually, this will probably be a separate page, but for now I'm keeping it all on the main page to test the functionality of the nav bar.</p>
	</div>
</body>
</html>

full css:

body {
	margin: 0;
}

h1 {
	text-align: center;
	font-size: 40px;
	font-family: sans-serif;
}

h2 {
	font-size: 24px;
}

p {
	font-family: "Arial";
}

div {
	font-family: sans-serif;
}

div.navigate {
	text-align: center;
	font-size: 16px;
	height: 32px;
	position: fixed;
	width: 100%;
	z-index: 10;
	background-color: #6495ED;
	padding: 0;
	margin: 0;
}

div.navigate a:link, div.navigate a:visited {
	text-decoration: none;
	display: inline-block;
	color: white;
	padding: 8px 32px;
}

div.navigate a:hover {
	text-decoration: none;
	display: inline-block;
	background-color: white;
	color: #6495ED;
	padding: 8px 32px;
}

.incomplete {
	color: red;
}

.complete {
	color: blue;
}

#4

the gap is caused by the margin-top of h1:

the margin is indicated with yellow. See? I couldn’t have figured this out with the original code you posted when you made this topic

The fixed element is taken out of the document flow, which is important to understand


#5

So what’s the best way to fix this? Is a negative top margin the way to go about it, or is there a more optimal solution? Also, if fixed items are removed from the flow of the html, shouldn’t that mean that other items’ margins don’t effect it?


#6

Well, there are more options then negative padding.

that would be very logic, unfortunately, that is not how collapsing margin was implemented:

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

thankfully, this collapsing margin docs also provide the following useful insight:

Two margins are adjoining if and only if:

no line boxes, no clearance, no padding and no border separate them

if we reverse this, the margin do not collapse when #top would have a padding or a border, problem would be solved :smiley:

we could simply make the border transparent, by using rgba color and give it an alpha of zero

also, for your left spacing is caused by the fact that body by default has a margin: 8px, which we can simply overwrite with by including body { margin: 0 } into our css code

EDIT: i highly recommend to use box-sizing: border-box, this makes the border and padding part of the elements width and height (by default, boxes are expanded when adding padding or borders, which is annoying)


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.