Padding vs Margin

[AlCapone]

Hi, Whats the differance between theses? When should you use one and not the other?

Many Thanks
Chris

[EamonnMac]

Just to illustrate further the differences –

Al, imagine two boxes, 200px wide and 200px high each, with a border of 1px. With margin and padding set to zero, these boxes will fit right up against each other and occupy exactly 202px + 202px of space on screen. For the sake of the argument, let’s say they’re displayed inline with one another, so they’re taking up an area 404px wide and 202px high on the extreme top left corner of your screen. Ok?

Now, say you give the box on the left (box A) a css style of margin: 10px; and Box B a style of margin: 50px 5px 5px 5px;

Box A will still be 202px wide and high, but, because you’ve given it an overall margin or 10px, it will now push itself 10px away from its surroundings. Instead of being right up in the top left corner of your screen, it will now sit 10px from the top, 10px from the left, and it will push Box B 10px to the right (away, that is, from its own right side). If there was anything under it, it would push that away too. Box B will then apply its own style and push itself 50px from the top of the screen and 5px away from every other side. If you want to know where it will now end up, you have to do some sums: 10px(Box A’s left margin) + 1px(left border) + 200px(Box A) + 1px(right border) + 10px(Box A’s right margin) + 5px(box B’s left margin) = 227px from the left of the screen, or 25px from where it started from. That’s ‘margin’, like an external negative magnetic field.

Padding is different. It operates on the inside of the box and is designed to keep the content of a div away from the edges of a div. If I take my Box A of 200px X 200px (+1px +1px for border) and add padding of 10px to it, intuition would say that that padding must fit into that 200px X 200px (like literally putting cotton wool into a cardboard box), thus leaving an area of 180 X 180 inside of it for my content. Not so. That 200px X 200px area is viewed by standard compliant browsers as the content of the div whether I’ve actually put anything in there or not. Padding, therefore, goes on top of those 200px values, leaving Box A now measuring 1(border) + 10(padding) + 200(area) + 10 + 1px wide/high. In simpler terms, if I wanted to keep Box A occupying a 200 X 200 area, with 10px padding inside, I would have to give it a width/height of 180px and then add my padding.

Note I said standard compliant browsers – some versions of IE I believe use the cardboard box method leaving your Box A still measuring 200 X 200. That’s why it’s dangerous to rely on it in your layout – I’ve seen some advocate not using it at all!

Anyway, I hope I haven’t confused you completely now! Hope it helps…

EDIT – Um, shiny, this is the CSS section of the forums… :D

[AlCapone]

Thanks, both posts realy helped! Its just I am building a website and i never knew which one i should be using so just used whichever one came to my head first as they both seemed to have the same affect. The probelm now is that ie 6 and ie 7 seem to behaving problems displaying my site where i have used iether padding or margin – dont know which is having the problem yet.

Many Thanks anyway
Chris

[drtortoise]

are you using floats? the IE double-margin bug is a common one…

[AlCapone]

yeah, its the menu list floaating left to be horizontal, the part under the menu should be so many pixles below the text (works fine in ffox) but in ie 6 and 8 the content below the mennu is pushed right up to the menu text.

[drtortoise]

without looking at the code it is a bit more difficult to help you, but it soudns like you’re not clearing your floats properly.
On the div class that has the content (that should be below the navigation), try putting clear:both; in the css.

[EamonnMac]

@ shiny: Dang it! :D

@ Al – also check your absolute/relative positioning. If anything is absolutely positioned, it’s like it doesn’t exist where any other content is concerned, so margins won’t work to keep them away.

[Author]

Posts