3

I was under the impression that writing: 

  margin-bottom: 5px;

Would be the same as 

  margin: 0px 0px 5px 0px;

However the two behave differently. The second doesn't just add margin at the bottom, but also causes some margin to appear at the sides. I'm using Bootstrap scaffolding and it causes the content to wrap onto a new line.

Looking at Firebug I see: 

    margin: 0 0 5px;

Can you shed some light on what is happening here?

Community
  • 1
  • 1
Derek Hill
  • 5,965
  • 5
  • 55
  • 74
  • _“Looking at Firebug I see: `margin: 0 0 5px`”_ – that _is_ a margin-bottom of 5px only, all other margins are 0. So what are you actually asking here? – CBroe Oct 01 '13 at 09:01
  • 2
    And of course the two styles you have shown are different – the first one _only_ specifies the bottom margin, so for all other margins values defined elsewhere (if not in your stylesheets, then maybe in the browser’s default stylesheet) are still applied, whereas the second one sets all values explicitly. – CBroe Oct 01 '13 at 09:03
  • @CBroe you are correct. Makes total sense now you say it. If you put this as an answer (your second point) I would accept it. – Derek Hill Oct 01 '13 at 09:09
  • OK, added it as an answer. – CBroe Oct 01 '13 at 10:03

3 Answers3

4

margin comes in four shorthand forms:

  • margin: X is expanded to X X X X
  • margin: X Y is expanded to X Y X Y (X on top and bottom, Y on sides)
  • margin: X Y Z is expanded to X Y Z Y (X on top, Y on sides, Z on bottom)
  • margin: X Y Z T defines all four margins explicitly.

In your case, you defined X Y Z T, but Y and T are the same, therefore the browser simplified it to the synonymous X Y Z.

It shouldn't be adding margin to the sides, but one thing to note is that you are explicitly setting the other margins to zero - this might cause issues.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Thanks. How do you mean "explicitly setting the other margins to zero?" I tried `margin: 0 0 5px 0;`but this has the same behavior. EDIT: Just saw @CBroe's comment. Got it now! – Derek Hill Oct 01 '13 at 09:03
1

The two style declarations you have shown are different:

The first one, margin-bottom: 5px;, only specifies the bottom margin, so for all other margins (top, left, right) values defined elsewhere (if not in your stylesheets, then maybe in the browser’s default stylesheet) are still applied – whereas the second one, margin: 0px 0px 5px 0px; sets all values explicitly.

CBroe
  • 91,630
  • 14
  • 92
  • 150
0

Hope this helps:

margin: 0 0 5px; is [top], [left & right], [bottom].

Chan Chee Chiew
  • 1