Padding above top nav bar

[Spock]

Hey guys, I’m taking up HTML/CSS for the first time in years and I’ve followed some good tutorials and I believe I have the basics down. I’ve plucked up the courage to begin my own project and so far I’ve ran into a snag with the top nav bar. I’ve created a div id of topbar, and I’ve set the colour and what not, however the bar does not reach the very top of the page. I’ve set padding and margin to 0 in both body and in my topbar but I’m having problems getting it to reach the top.

body {
background-color: #121211;
position: fixed;
top: 0;
width: 100%;
height: 35px;
text-align: center;
padding: 0;
margin: 0;
}

#topbar {
background-color: #FFFFFF;
border-bottom: 4px solid #444442;
height: 48px;
max-width: 100%;
min-width: 1000px;
padding: 0;
margin: 0;
}

[Watson90]

I am unsure why you have put a 35px height on the body element and used a fixed position.

Try this in your CSS instead;

* { /* This is just a basic reset to strip all margin and padding */
padding: 0;
margin: 0
}

body {
background: #121211; /* Shorthand for background properties */
text-align: center; /* Aligns all text centrally */
}

#topbar {
height: 48px;
background: white; /* Possible to use names for colours (to an extent) */
border-bottom: 4px solid #444442;
}

[Paulie_D]

To start with…don’t do this:

body {
position: fixed;
top: 0;
width: 100%;
height: 35px;
}

It’s unnecessary.

You might want to look into a reset.css or normalize.css

[Spock]

Thank you guys! I don’t know why either! Still learning I suppose. :)

[wolfcry911]

a child element of #topbar has top margin protruding out the top. you can do a number of things to fix the problem. 1) add overflow: hidden; to #topbar – this changes its block formatting context; 2) add a top padding or border to #topbar; 3) eliminate the top margin on the child element.

Watson90, using the universal selector to zero padding and margin is not a good idea.

[Watson90]

@wolfcry911 – why is that? – I did state it was a basic reset, especially when the guy is just getting back into code.

[Author]

Posts