4

i totally understand the box model. this question is more about trying to pin down a semantic methodology regarding when to use margins and when to use padding.

here is a typical example,

first, in plain English:

  • situation: we have a container div, inside of which there is a paragraph element.

  • goal: to have a 12px space between the inside of the div and the outside of the paragraph.

  • option a) apply 12px of padding to the container div

  • option b) apply 12px margins to the paragraph element

or, if you prefer, HTML:

<div id="container">
    <p>Hello World!</p>
</div>

and, CSS:

option a)

div#container {padding: 12px;}

option b)

p {margin: 12px;}

Cheers!

Jon

jon
  • 5,961
  • 8
  • 35
  • 43

7 Answers7

4

Paddings and margins gives the same effect, Except in the following cases (I might miss some):

  1. You have some kind of background properties. Margins won't get them.
  2. You have a border
  3. You use TD (no margins)
  4. Two nested items, The margins are collapsed together, where paddings not.
  5. (need to check this one) They probably affect the width and height of the element differently. (If some one knows better, pls edit this).
Itay Moav -Malimovka
  • 52,579
  • 61
  • 190
  • 278
3

Personally, I prefer option A. Why? Say now I have to add other HTML elements into the div and I want the padding to be maintained, I would not have to add other rules to my CSS files to get it working.

DLS
  • 5,313
  • 8
  • 37
  • 50
  • for me, this is the best answer. but you must consider your specific situation. see "Itay Moav's" answer. – jon Sep 14 '09 at 05:52
3

This is a bug in css, here are examples:

http://creexe.zxq.net/div-issue-padding.html = padding issue

http://creexe.zxq.net/div-issue-margin.html = margin issue

the red and green div tags in the examples were created by the css property TOP,but it has its own disadvantages athat TOP,BOTTOM etc works only when the position of the div tag is Absolute and relative, but not static

saurabh
  • 31
  • 1
2

It depends on what you're trying to accomplish visually. Would container have other child elements which might hang over into the gutter on either side of the paragraph? If so, a margin makes more sense. But if container should have a 12-pixel gutter for all elements, period, it makes the most sense to use the padding to avoid having to apply margins to multiple element sets.

Generally speaking you always want paragraphs to have vertical margins to ensure consistent paragraph leading.

Rex M
  • 142,167
  • 33
  • 283
  • 313
  • what do you mean by "gutter"? :) – jon Sep 14 '09 at 03:15
  • @jon the gutter is the unused space on one or more sides of text. It's different from a margin because it might make sense for a graphical element to hang into the gutter. – Rex M Sep 14 '09 at 03:17
1

Personally, I'd go with option a of #container {padding: 12px;} because it makes amply clear that all child elements must stay 12px away from the border of this div.

If I want other elements to stay more than 12px away from the #container's border, then I apply as much more margin to that element.

Cheers!

jrharshath
  • 25,975
  • 33
  • 97
  • 127
0

Vertical padding on the division - because if I decided I wanted a different amount of vertical space in between the multiple paragraphs I'd use bottom margins, and the top/bottom padding of the enclosing division pretty much will always stay intact assuming you just have staticly positioned elements inside.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
0

The difference is where the border sits.

The border sits SMACK DAB in the middle of the margins and padding. If you specify margins, that is white space OUTSIDE the border.

If you specify padding, that is white space INSIDE the border (pushes the border further out from the element)

Can't show you here due to css stripping, but try this out:


<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

other stuff!

  • padding brings in background color of the element, margins are basically transparent

  • some elements ( like td ) seem to ignore margins, while they respond to changes in padding

bobobobo
  • 64,917
  • 62
  • 258
  • 363
  • A few things to consider: - padding brings in background color of the element, margins are basically transparent - some elements ( like td ) seem to ignore margins, while they respond to changes in padding – bobobobo Sep 14 '09 at 03:40