8

I have two divs: 

<div id="headercontainer" data-type="background" data-speed="5"> 
    <div id="headersubcontainer">
        <h1>Simple and Cost Effective Web Solutions</h1>  
    </div> 
</div>

<div id="teamcontainer" data-type="background" data-speed="5"> 
    <div id="teamsubcontainer"> 
        <h1>Developed by a dedicated team</h1> 
    </div> 
</div>

both have 100% widths and heights of 800px. The first heading I have set a top-margin: of 160px. Instead of moving the header lower into its parent div, it moves the parent div down with it as you can see in this picture:

webpage

Here is my relevant css: 

h1{
    font-size: 48px;
    font-family: $header-font-stack; 
    font-weight: 100;
    width: 400px;
}

#headercontainer{
    width: 100%; 
    height: 800px;
    background-image: image-url("background.jpg");
    background-position: center top;
    background-repeat: no-repeat;
}

#headercontainer h1{
    text-align: center;
    margin: 0px auto;
    margin-top: 160px;
    color: #610B21;
}

Using a padding works obviously, but I would like to be more proper and use a margin. How can set a top margin and move the heading lower into the container without moving the container with it?

Sam D20
  • 2,535
  • 5
  • 25
  • 43
  • I think because the parent height is set to a constand value. Margins and paddings are counted plus the heights and widths. – scripter May 21 '14 at 16:25
  • possible duplicate of [Margin-Top push outer div down](http://stackoverflow.com/questions/2680478/margin-top-push-outer-div-down) – Jesús Carrera Feb 24 '15 at 17:47

4 Answers4

28

This is due to margin collapsing:

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

This is resulting in the parent element reverse-inheriting the child element top margin.

You can prevent this by adding &nbsp; before the child element

Demo Fiddle

....or applying any of the below to the parent:

  1. float: left / right
  2. position: absolute
  3. display: inline-block

Adding display:inline-block; to the parent likely being the preference if it is set to have a width to 100%

Demo Fiddle

SW4
  • 69,876
  • 20
  • 132
  • 137
1

just use box-sizing: border-box; on the parent and set the padding there instead of margin-top. It will help you keep consistent spacing on all sides anyways

JSFIDDLE

jmore009
  • 12,863
  • 1
  • 19
  • 34
1

Just add some top-padding to the parent element. even 1px and it will fix it.

xatzistnr
  • 174
  • 1
  • 7
1

I would actually argue that this answer is better:

https://stackoverflow.com/a/49075574/2387316

Yes, I know it's my own answer, but I think it's important that we don't add random bits of padding, change box-sizing for no reason, add spurious elements to the DOM, or change display/padding simply to fix a display issue. Those solutions all cause problems on their own: SEO is worse, unpredictable box-sizing behavior when trying to do something else, annoyance caused by positioning and display changes, etc. This solution is good for SEO, is scalable, and has no other tangible effect when trying to do other things with your elements.

dudewad
  • 13,215
  • 6
  • 37
  • 46