CSS Margin-Top of <H1> Affects Parent's Margin

CSS margin-top of h1 affects parent's margin

Thank you all for your answers, @gaurav5430 posted a link with a very precise definition that I would like to summarize into this answer. As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to collapsing margins:

"In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero

Basically in our example on the original question, the biggest margin-top is the one of the <h1> therefore taken and applied to the parent <div>.

This rule is cancelled for:

Floated elements
Absolutely positioned elements
Inline-block elements
Elements with overflow set to anything other than visible (They do not collapse margins with their children.)
Cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
The root element

That is the reason why overflow:hidden solved the issue.

Thanks @gaurav5430; here is the reference: http://reference.sitepoint.com/css/collapsingmargins

Also thanks to @Adrift that posted very good resources, although I found @gaurav5430's answer more straight forward and easier to understand.

Margin on child element moves parent element

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same.
Hence, you can also use the following to prevent a top-margin collapse:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021 update: if you're willing to drop IE11 support you can also use the new CSS construct display: flow-root. See MDN Web Docs for the whole details on block formatting contexts.

Update by popular request:
The whole point of collapsing margins is handling textual content. For example:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Why margin-top for inner elements affect the parent margin?

There are two ways using which you can eliminate that behaviour. First way is to apply overflow: hidden to the parent container i.e. #slider, like this:

header,section,article,small,nav {  display: block;}body {  font-family: tahoma, verdana, arial, sans-serif;  font-size: 14px;  margin: 0;  padding: 0;  background: #ffffff;  text-transform: capitalize;  box-sizing: content-box;  -moz-box-sizing: content-box;  -webkit-box-sizing: content-box;  -o-box-sizing: content-box;}h1,h2,h3,h4,h5,h6 {  font-weight: bold;  font-size: 14px;}/************************************************          ----------- Header  --------    *************************************************/
#body-wrap {  margin-top: 0;  padding-top: 0;  width: 600px;  margin-left: auto;  margin-right: auto;}header {  margin-top: 0;  height: 60px;  background: red url('Images/headerBG.gif') repeat;}header h3,header ul {  padding-top: 0;}header h3 {  float: left;  padding-left: 21px;  color: #ffffff;}#social-links {  float: right;  padding: 0;  padding-right: 20px;}#social-links li {  display: inline-block;  list-style: none;  padding-left: 13px;}#social-links li a {  -moz-transition-duration: 1s;  -ms-transition-duration: 1s;  -webkit-transition-duration: 1s;  -o-transition-duration: 1s;  transition: 1s;}#social-links li a:hover {  -webkit-transform: scale(1.5);  -moz-transform: scale(1.5);  -ms-transform: scale(1.5);  -o-transform: scale(1.5);  transform: scale(1.5);}#social-links input[type=button] {  padding-right: 21px;}/************************************************             ----------- nav  --------    *************************************************/
nav {  clear: both;  height: 36px;  background: green url('Images/navBG.gif') repeat;  margin-bottom: 0;}nav ul {  list-style: none;  display: inline-block;  margin-top: 0;  margin-bottom: 0;}nav ul li {  padding-top: 10px;}#main-menu-ul {  margin-left: 0;  padding-left: 21px;  ;  float: left;}#main-menu-ul li {  display: inline-block;  padding-left: 21px;}#main-menu-ul li a {  color: #FFFFFF;  text-decoration: none;  -moz-transition-duration: 1s;  -ms-transition-duration: 1s;  -webkit-transition-duration: 1s;  -o-transition-duration: 1s;  transition-duration: 1s;}#main-menu-ul li a:hover {  color: #8f8f8f;  -webkit-transform: scale(1.5);  -moz-transform: scale(1.5);  -ms-transform: scale(1.5);  -o-transform: scale(1.5);  transform: scale(1.5);}#search-ul {  float: right;  padding-right: 22px;}#search-ul li {  display: inline-block;}#search-ul input[type=text] {  width: 92px;  height: 14px;}#search-ul li label {  color: #FFFFFF;}#search-ul li input[type=button] {  padding: 0;  margin: 0;  font-size: 13px;  height: 20px;  margin-left: -4px;}/************************************************             ----------- slider  --------    *************************************************/
#slider {  clear: both;  margin-top: 0;  height: 236px;  background: gray url('Images/SliderBG.png') repeat-x;  overflow: hidden;}#slider-content-wrap {  clear: both;  width: 560px;  height: 154px;  margin-left: 20px;  margin-right: 20px;  background-color: #3493ff;  margin-top: 20px;}#inside-div-slider {  margin-top: 20px;  background-color: #ffe132;  height: 100px;  width: 360px;}

<body>  <div id="body-wrap">
    <header>      <h3>SITE NAME </h3>
      <ul id="social-links">
        <li>          <a href="http://www.yahoo.com">            <img src="Images/fb.gif">          </a>        </li>        <li>          <a href="#">            <img src="Images/fb.gif">          </a>        </li>        <li>          <a href="#">            <img src="Images/fb.gif">          </a>        </li>        <li>          <a href="#">            <img src="Images/fb.gif">          </a>        </li>
      </ul>

    </header>
    <nav>      <ul id="main-menu-ul">        <li><a href="#">Home</a>        </li>        <li><a href="#">About</a>        </li>        <li><a href="#">Portfolio</a>        </li>        <li><a href="#">Blog</a>        </li>        <li><a href="#">Contact</a>        </li>      </ul>

      <ul id="search-ul">        <li>          <label>Search :            <input type="text" id="search-field">          </label>        </li>        <li>          <input type="button" value="Go!">        </li>

      </ul>    </nav>

    <!--********************Slider*******************-->

    <section id="slider">      <div id="slider-content-wrap">        #slider-content-wrap        <div id="inside-div-slider">#inside-div-slider</div>

      </div>

    </section>


    <!--********************Slider*******************-->
    <section id="footer-section-1"></section>    <section id="footer-section-2"></section>    <footer></footer>  </div></body>

CSS margin terror; Margin adds space outside parent element

Add overflow:auto to your #page div.

jsFiddle example

And check out collapsing margins while you're at it.

Unwanted top margin for h1 element

You need to add margin:0;:

h1 {
    margin:0;
    background-color: lime;
}

JSFiddle: http://jsfiddle.net/tb39am7s/

Body element has no margin but children's margin affects body's margin

That's the effect of margin collapsing. According to that MDN page:

Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

There are many ways to go about trying to work around it. But understanding this concept is one step to doing it.

In your case, the margin of the first element in your body (which is h1) affects the margin of the body. If you wish to not have a margin on the first h1, you could add this (see it on this jsfiddle):

h1:first-child {
  margin-top: 0;
}

This assume your first element in the body is an h1.

The margin does not collapse through the parent's padding

Remove padding (top and bottom one at least) and set overflow: hidden on the <blockquote>.

This is just one of the tricks to contain the margin. There are at least 5 other.

Why is the margin of my child html element outside the parent

It's "margin collapsing" which can seem confusing at first.

I recommend you read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

CSS Margin-Top of <H1> Affects Parent's Margin