Margin top don’t work
I am trying to set margin top to the inside div (“main”) but it’s not working, and sometimes it pushed the outside div (“news_wrapper”) instead.
Here is the fiddle link: https://jsfiddle.net/g2a9bpnd/
This is the div that need to get the margin top:
That’s because of 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.
One option to fix this would be to add
overflow: hidden to the element
#news_wrapper. In doing so, this will establish a new block formatting context.
As a side note,
margin: 0px auto was overriding
Either add the
margin: 0 auto; margin-top: 30px;
..or use the shorthand:
margin: 30px auto 0;