Some unexplainable margin in header
element. Not able to remove it or know why it is there

Question

Please refer to the code below:- https://jsfiddle.net/Omega_Coding/xo1dtg52/1/

Cant able to understand why is there spacing above and below the header div. Want the complete header to be of steelblue color.

If you go to the fiddle, you will be able to see that there us header div is not able to stretch to the whole intended header. Need it to cover the full height above nav bar, so that its all steelblue and no black color.

<body>
<div id="header">
    <p>THE GREAT</p>
    <p>RGB (<span id="r">0</span>, <span id="g">0</span>, <span id="b">0</span>)</p>
    <p>GUESSING GAME</p>
</div>  

<nav class="nav">
    <button id="new">RESET</button>
</nav>

<div id = "box">
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
</div>

body{
font-size: 25px;
text-align: center;
background: #232323;
color: white;
}

#header{
background: steelblue;
}

button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 500;
color: steelblue;
font-size: inherit;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
outline: none;
}

nav{
height: 30px;
width: 100%;
background-color: white;
color: black;
}

.boxes {
width: 30%;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 15%;
transition: background 0.6s;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
}

#box {
margin: 20px auto;
max-width: 600px;
}

Collapsing margins, add this to `#header` - `padding: 1px 0;` or you could get rid of the native margin on the `p` tag and just use padding for top/bottom spacing — Huangism, Oct 23 '17 at 18:37
Possible duplicate of [How to disable margin-collapsing?](https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) — Huangism, Oct 23 '17 at 18:39
Reset `margin` on `body` (origin: user agent stylesheet, a vendor/browser *added* style, consider it a "default" style given by the browser), *e.g:* `body { margin: 0px; }` - then clean up margins on `p` elements nested in `#header` where necessary. — UncaughtTypeError, Oct 23 '17 at 18:39

score 1 · Answer 1 · answered Oct 23 '17 at 18:43

Collapsing margins: when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored.

Inspect your page and you'll see the margin on the <p> tag is what is offsetting your header from being flush with the top of the window (the browser applies native styles, even if you don't specify one, which I see you didn't). If you set your <p>'s margin inside the header to 0 you'll see the change. You'll be left with an 8px margin from the top, which is native styling applied to body. So...

p {
margin:0;
{
body {
margin:0;
}

@Omega No problem. FYI, accepting helpful answers are currency around here. Welcome to SO. — smilebomb, Oct 23 '17 at 19:01

score 0 · Answer 2 · edited Oct 23 '17 at 18:50

0

About spacing above and below the header <div>, try :

body{
  margin:0;
}
p{
 margin:0;
}

edited Oct 23 '17 at 18:50

Vega

27,856
27
95
103

answered Oct 23 '17 at 18:47

Yura Halias

11
4

Some unexplainable margin in header element. Not able to remove it or know why it is there

2 Answers2

Some unexplainable margin in header
element. Not able to remove it or know why it is there