0

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:

#main {
  margin-top:30px;
  background-color: #FFF;
  padding: 0 30px 0 28px;
  border-radius: 4px;
  text-align: left; 
  color: #494949;
  border: 1px solid #d0d1d3;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0px auto;
  width: 150px;
  padding: 23px;
  min-height: 350px;
  height: auto;
}
alonblack
  • 925
  • 2
  • 13
  • 31
  • 2
    This is not a pure duplicate of margin collapsing. The collapsing only answers half of the question – Huangism Mar 18 '15 at 14:24
  • 1
    I'm voting to reopen. @BasementKeyboardHero, OP was canceling out his own rule by using `margin` with `margin-top`. – Sparky Mar 18 '15 at 14:27
  • It's a mix of collapsing + typo, any suggestions? cc/ @Huangism – Patsy Issa Mar 18 '15 at 14:38
  • @BasementKeyboardHero I am not sure what you mean by suggestions, I put down an answer as in my opinion the main issue is the overriding of margin – Huangism Mar 18 '15 at 14:41

2 Answers2

4

That's because of collapsing margins.

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.

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.

Updated Example

#news_wrapper {
  width: 100%;
  width: 600px;
  height: 100%;
  min-height: 800px;
  margin: 0 auto;
  background-color: #34353A;
  overflow: hidden;
}

As a side note, margin: 0px auto was overriding margin-top: 30px.

Either add the margin-top after,

margin: 0 auto;
margin-top: 30px;

..or use the shorthand:

margin: 30px auto 0;
Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Don't we already have enough questions/answers explaining margin-collapse? You have enough rep, you should know better by now. – cimmanon Mar 18 '15 at 14:33
  • @cimmanon Well, there are already *a lot* of questions I don't answer because they are duplicates. And yes, I've already answered numerous question involving collapsing margins, but this question wasn't purely about collapsing margins, there was another issue as I addressed... Often times I find myself answering questions in the comments, and that's not what comments are for. Thus, I posted an answer... – Josh Crozier Mar 18 '15 at 14:36
1

You defined margin 2 times

margin-top:30px;

and 

margin: 0px auto;

The later definition will override the earlier one so you got no margin

If you need to center do

margin: 30px auto 0 auto;

shorthand 

margin: 30px auto 0;

the last auto can be omitted

https://jsfiddle.net/g2a9bpnd/2/

For that pushing issue you are mentioned, that's margin collapsing

http://www.w3.org/TR/CSS2/box.html#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, except:

Margins of the root element's box do not collapse.
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of

following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

Horizontal margins never collapse.

Huangism
  • 16,278
  • 7
  • 48
  • 74