what's the difference between padding and margin?

Question

In W3 CSS and also in XUL/CSS? (not between CSS and XUL/CSS).

Bloodshot

possible duplicate of How to remember in CSS that margin is outside the border, and padding inside – Hufnagel

Answer 1

Padding is the space INSIDE an element (inside the border of the element).

Margin is the space OUTSIDE(Around) an element.

Wit

uhh. Why is this being voted up? According to the CSS box model this is untrue. w3.org/TR/CSS2/box.html – Nipper

@Nipper - What are you talking about? Margin is the spacing around/outside an element. Padding is internal. – Wit

The reason: element width does not include padding. Read the spec. – Nipper

@Nipper that really doesn't change my answer. He didnt mention width, he asked the difference. – Wit

@webdestroya of course it changes your answer, as it is demonstrably wrong. Look at the picture I linked above. Padding IS NOT inside the element! – Nipper

@Nipper ... your picture just confirms my post. Look at what everyone else is saying in theirs, we are all correct. – Wit

By inside, i meant inside the border. – Wit

You didn't say border, you said element. – Nipper

@all thanks to everyone. however, could you elaborate more on why the width of element is not changed by padding? My understanding is that the more is padding the more width/height of the element. Is it not true? – Bloodshot

@Michael Sort of. padding is more like the fat on a skeleton. It doesn't change the size of the skeleton, but makes the person appear larger. If you set Width=500, then added 100px of padding to both sides, your element would be 700px wide, but the width of the content-area inside would still be 500px. – Wit

The difference is the definition of "width". If you define something with a fixed width (Say 500px) in css with no padding, it will be 500px on screen. If you give it padding, then 10px of padding will be filled in around it. – Nipper

@Michael no it's not. Unless you're a broken MSIE box model. The opposite happens -- padding makes the content take up more space. ;-) – Nipper

Yes complete width of the box is the leftMargin + leftBorder + leftPadding + width + rightPadding + rightBorder + rightMargin – Cortisol

@all. got it! Wish I could accept all of the answers... anyway, at least upvoted :) – Bloodshot

the padding makes the border to move(expand in particular). the margin makes surrounding elements to move. – Bloodshot

Why would you accept the least precisely worded answer? Padding is not included in the css width of an element. – Nipper

@ghoppe: because this guy put a lot of efforts to defend his answer. the actual answer is within this conversation, not in initial post. – Bloodshot

@Michael: fair enough, I hope someone does the same for me when I defend an imprecise answer. :) – Nipper

By the way, one more thing to think about proving this answer is still quite confusing and imprecise. Is the border of an element inside or outside the element? – Nipper

@webdestroya @Michael said "he padding makes the border to move(expand in particular). the margin makes surrounding elements to move." -- padding also causes surrounding elements to move. This trips up many web designers. – Nipper

Another down vote for this - I don't think the right answer has been accepted here. If a novice reader was to read only the question and this 'answer', they'd come away with a completely incorrect understanding of this important aspect of the box model. ghoppe's answer is the best - it clearly explains the key points without ambiguity. – Goodnatured

Padding is what determines the space inside of an element. Margin will effect anything outside of it. My way of explaining it – Jungle

Answer 2

I recommend this article for you. The diagram is from that article.

http://elegantcode.com/2010/01/26/css-basics-the-box-model/

Dr

Answer 3

Padding is the area between the content and the border while the margin is the area outside the border.

See CSS box model for clarification.

Cortisol

Answer 4

OK, several of these answers use confusing terminology and are wrong.

The css width of an element does not include padding, borders, or margin.

Therefore it is imprecise to say "padding is inside an element".

It is correct to say "padding is inside the border of an element" and "margin is outside the border of an element".

To calculate how much space a box takes up (for example, just horizontally):

horiz. space = width + 2(padding) + 2(border) + 2(margin)

It bugs me when people say "padding is space inside an element" because: the element has padding, it has a border, and it has margin. All of that stuff is outside the content width of the element, and must be accounted for when calculating how much space the element takes up.

If you say "padding is inside the element" then you are making the same mistake MSIE did in its broken box model, causing untold web designers many headaches.

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

Nipper

Answer 5

Margin is the space outside the border of an element. It creates space between the border of an element and its adjacent elements. It is used to control the external spacing between elements.

Padding is the space inside the border of an element. It creates space between the element's content and its border. It is used to control the internal spacing between the content and the border of an element.

River

Answer 6

padding is part of the width of an element. margin is outside and isn't part of the width

Here's an interesting box model demo that will help you understand.

http://redmelon.net/tstme/box_model/

Alliterate

Padding is not part of the width of an element. #div1 {width: 500px; padding: 10px;} will look bigger on the screen than #div2 {width: 500px; padding: 0px;} (unless you're a broken MSIE box model: 456bereastreet.com/archive/200612/…) – Nipper

yes padding will make that box "wider". that box will be 520px wide. the broken ie box model will still be 500px wide, it makes room for the padding. its semantics. i know what you're saying, i guess it's just hard to put into words correctly. needs a picture. – Alliterate