css - Need review, increasing top margin on content increases the height of header -

so if increase top margin on #featured, pulls height header down it. doing wrong?

example. if change #featured {margin:0 auto} #featured {margin:20px auto}, white of header go down 20 px, , show featured. want #featured gets pulled down 20px , grey 'border' remains between featured , header

site: http://e2-repair.be/

* {   -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;           box-sizing: border-box; }  header {     height: 100px;  }  header #header-cont {     width: 1000px;     margin: 0 auto;     height: 100px;     font-family: 'sofadi one', cursive;     }  header img {     height: 80px;     width: 80px;     float:left;     margin-top:10px; }  header h1 {     font-size:32px;     float:left;     height:100px;     line-height:100px; }  header nav{     float: right; }  header nav ul {     list-style: none;     display: block;     height:100px; }  header ul li {     display: inline-block;     padding: 0 50px; } header ul li a{     text-decoration: none;     color: #990000;     display: block;     height: 100px;     line-height: 100px;     border-top: 3px solid;     border-color: #fff;     -webkit-transition: border-color .1s linear;     -moz-transition: border-color .1s linear;     -o-transition: border-color .1s linear;     transition: border-color .1s linear;     }  nav ul li a:hover {     border-color: #990000; }  header a:hover, header a:visited, header a:active {     color: #333;     text-decoration: none;     outline: 0; }  #content-1 {     height: 400px;     background-color: grey; }  #featured {     position:relative;     height: 350px;     width: 1000px;     margin: 0 auto;     border:2px solid;     border-radius:5px;     border-color:white; } 

html:

    <header>         <div id="header-cont">             <img src="logo.png" alt="logo" />             <h1>e2 repair</h1>             <nav>                 <ul>                     <li><a href="smartphones.php">smartphones</a></li>                     <li><a href="tablets.php">tablets</a></li>                     <li><a href="laptops.php">laptops</a></li>                     <li><a href="desktops.php">desktops</a></li>                     </ul>             </nav>         </div>     </header>      <div id="content-1">         <div id="featured">         fewfwe         </div>     </div> 

add padding-top inside #content-1 container instead of adding margin child.

alternatively, can add overflow: auto #content-1 contaner, , margins applied child #featured work.

the reason why works due fact 2 elements margins join (collapse) when adjacent. so, margin applied child elements gets joined parent one. this, unless margins don't touch eachother (which happens if use padding): infact, use:

#content-1 { padding: 1px; } #featured  { margin:  19px auto; } 

as long not touching eachother, not collapse, child element maintains own margin. specs:

the top margin of in-flow block element collapses first in-flow block-level child's top margin if element has no top border, no top padding, , child has no clearance.

source

the overflow: auto has effect of not making borders collapse (from above page):

margins of elements establish new block formatting contexts (such floats , elements 'overflow' other 'visible') not collapse in-flow children.