Why does this CSS margin-top style not work

Question

I try to add margin values on a div inside another div  All works fine except the top value  it seems to be ignored  But why   What I expected    What I get    Code    x000D   x000D   outer   x000D       width  500px   x000D       height  200px   x000D       background   FFCCCC  x000D       margin  50px auto 0 auto  x000D       display  block  x000D    x000D   inner   x000D       background   FFCC33  x000D       margin  50px 50px 50px 50px  x000D       padding  10px  x000D       display  block  x000D    x000D   lt div id  outer  gt  x000D     lt div id  inner  gt  x000D     Hello world  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    W3Schools have no explanation to why margin behave this way

User · Answer

Just for a quick fix  try wrapping your child elements into a div element like this -   lt div id  outer  gt      lt div class  divadjust  style  padding-top  1px  gt         lt div id  inner  gt           Hello world         lt  div gt      lt  div gt   lt  div gt    Margin of inner div won t collapse due to the padding of 1px in-between outer and inner div  So logically you will have 1px extra space along with existing margin of inner div

User · Answer

Not exactly sure why  but changing the inner CSS to display  inline-block   seems to work

User · Answer

What  BoltClock mentioned are pretty solid  And Here I just want to add several more solutions for this problem  check this w3c collapsing margin  The green parts are the potential thought how this problem can be solved   Solution 1     Margins between a floated box and any other box do not collapse  not even between a float and its in-flow children     that means I can add float left to either  outer or  inner demo1   also notice that float would invalidate the auto in margin   Solution 2     Margins of elements that establish new block formatting contexts  such as floats and elements with  overflow  other than  visible   do not collapse with their in-flow children    other than visible  let s put overflow  hidden into  outer  And this way seems pretty simple and decent  I like it    outer      width  500px      height  200px      background   FFCCCC      margin  50px auto      overflow  hidden     inner       background   FFCC33      height  50px      margin  50px      Solution 3     Margins of absolutely positioned boxes do not collapse  not even with their in-flow children      outer      width  500px      height  200px      background   FFCCCC      margin  50px auto      position  absolute      inner      background   FFCC33      height  50px      margin  50px      or    outer      width  500px      height  200px      background   FFCCCC      margin  50px auto      position  relative      inner       background   FFCC33      height  50px      margin  50px      position  absolute      these two methods will break the normal flow of div  Solution 4     Margins of inline-block boxes do not collapse  not even with their in-flow children     is the same as  enderskill  Solution 5     The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling  unless that sibling has clearance    This has not much work to do with the question since it is the collapsing margin between siblings  it generally means if a top-box has margin-bottom  30px and a sibling-box has margin-top  10px  The total margin between them is 30px instead of 40px   Solution 6     The top margin of an in-flow block element collapses with its first in-flow block-level child s top margin if the element has no top border  no top padding  and the child has no clearance    This is very interesting and I can just add one top border line   outer      width  500px      height  200px      background   FFCCCC      margin  50px auto      border-top  1px solid red      inner       background   FFCC33      height  50px      margin  50px       And Also  lt div gt  is block-level in default  so you don t have to declare it on purpose  Sorry for not being able to post more than 2 links and images due to my novice reputation  At least you know where the problem comes from next time you see something similar

User · Answer

Create new block formatting context You can use display  flow-root on the parent element to prevent margin collapsing through the containing element as it creates new Block Formatting Context  Changing the value of the overflow property to auto or using flexbox will have the same effect  https   codepen io rachelandrew pen VJXjEp

User · Answer

Not sure why what you have doesn t work  but you can add  overflow  auto    to the outer div

User · Answer

Try using display  inline-block  on the inner div    outer       width 500px       height 200px       background  FFCCCC      margin 50px auto 0 auto      display block     inner       background  FFCC33      margin 50px 50px 50px 50px      padding 10px      display inline-block

User · Answer

try this    outer       width 500px       height 200px       background  FFCCCC      margin 50px auto 0 auto      display table     inner       background  FFCC33      margin 50px 50px 50px 50px      padding 10px      display block       http   jsfiddle net 7AXTf   Good luck

User · Answer

If you add any padding to  outer  it works   Demo    outer       width 500px       height 200px       background  FFCCCC      margin 50px auto 0 auto      display block      padding-top 1px

User · Answer

Use padding-top 50pxfor outer div  Something like this    outer       width 500px       height 200px       background  FFCCCC      margin 50px auto 0 auto      display table     Note  padding will increase the size of your div  In this case if the size of your div is important  I mean if it must have a specific height  decrease the height by 50px     outer       width 500px       height 150px       background  FFCCCC      margin 50px auto 0 auto      display table

User · Answer

You re actually seeing the top margin of the  inner element collapse into the top edge of the  outer element  leaving only the  outer margin intact  albeit not shown in your images   The top edges of both boxes are flush against each other because their margins are equal   Here are the relevant points from the W3C spec      8 3 1 Collapsing margins      In CSS  the adjoining margins of two or more boxes  which might or might not be siblings  can combine to form a single margin  Margins that combine this way are said to collapse  and the resulting combined margin is called a collapsed margin       Adjoining vertical margins collapse              Two margins are adjoining if and only if          both belong to in-flow block-level boxes that participate in the same block formatting context   no line boxes  no clearance  no padding and no border separate them   both belong to vertically-adjacent box edges  i e  form one of the following pairs          top margin of a box and top margin of its first in-flow child         You can do any of the following to prevent the margin from collapsing         Float either of your div elements   Make either of your div elements inline blocks   Set overflow of  outer to auto  or any value other than visible       The reason the above options prevent the margin from collapsing is because         Margins between a floated box and any other box do not collapse  not even between a float and its in-flow children     Margins of elements that establish new block formatting contexts  such as floats and elements with  overflow  other than  visible   do not collapse with their in-flow children    Margins of inline-block boxes do not collapse  not even with their in-flow children        The left and right margins behave as you expect because      Horizontal margins never collapse

User · Answer

Doesn t answer the  why   has to be something w  collapsing margin   but seems like the easiest most logical way to do what you re trying to do would be to just add padding-top to the outer div   http   jsfiddle net hpU5d 1   Minor note - it shouldn t be necessary to set a div to display block  unless there s something else in your code telling it not to be block

User · Answer

Have you tried  important before all  it will force everything   margin 50px 50px 50px 50px  important

User · Answer

I guess setting the position property of the  inner div to relative may also help achieve the effect  But anyways I tried the original code pasted in the Question on IE9 and latest Google Chrome and they already give the desirable effect without any modifications

[html] Why does this CSS margin-top style not work?

Examples related to html

Examples related to margin

Examples related to css