In W3 CSS and also in XUL/CSS? (not between CSS and XUL/CSS).
+5
A:
Padding is the space INSIDE an element (inside the border of the element).
Margin is the space OUTSIDE(Around) an element.
webdestroya
2010-05-13 01:03:47
@downvoter - any reason for this?
webdestroya
2010-05-13 01:08:45
uhh. Why is this being voted up? According to the CSS box model this is untrue. http://www.w3.org/TR/CSS2/box.html
ghoppe
2010-05-13 01:09:20
@ghoppe - What are you talking about? Margin is the spacing around/outside an element. Padding is internal.
webdestroya
2010-05-13 01:10:32
The reason: element width does not include padding. Read the spec.
ghoppe
2010-05-13 01:10:43
@ghoppe that really doesn't change my answer. He didnt mention width, he asked the difference.
webdestroya
2010-05-13 01:11:24
Nice pic here: http://css-tricks.com/the-css-box-model/
ghoppe
2010-05-13 01:12:21
@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!
ghoppe
2010-05-13 01:13:13
@ghoppe ... your picture just confirms my post. Look at what everyone else is saying in theirs, we are all correct.
webdestroya
2010-05-13 01:13:23
By inside, i meant inside the border.
webdestroya
2010-05-13 01:13:51
You didn't say border, you said element.
ghoppe
2010-05-13 01:15:40
There, I have clarified my response so that it is clear now.
webdestroya
2010-05-13 01:17:14
@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?
Michael
2010-05-13 01:26:29
@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.
webdestroya
2010-05-13 01:28:16
I guess padding is just squeezing the content inside...
Michael
2010-05-13 01:28:48
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.
ghoppe
2010-05-13 01:29:01
@Michael no it's not. Unless you're a broken MSIE box model. The opposite happens -- padding makes the content take up more space. ;-)
ghoppe
2010-05-13 01:30:15
Yes complete width of the box is the `leftMargin` + `leftBorder` + `leftPadding` + `width` + `rightPadding` + `rightBorder` + `rightMargin`
rebus
2010-05-13 01:30:43
@all. got it! Wish I could accept all of the answers... anyway, at least upvoted :)
Michael
2010-05-13 01:35:34
the padding makes the border to move(expand in particular). the margin makes surrounding elements to move.
Michael
2010-05-13 01:37:11
@Michael - yes, that is correct :)
webdestroya
2010-05-13 01:38:02
Why would you accept the least precisely worded answer? Padding is *not* included in the css width of an element.
ghoppe
2010-05-13 01:40:35
@ghoppe: because this guy put a lot of efforts to defend his answer. the actual answer is within this conversation, not in initial post.
Michael
2010-05-13 01:52:08
@Michael: fair enough, I hope someone does the same for me when I defend an imprecise answer. :)
ghoppe
2010-05-13 01:53:24
@Michael - Thanks, I really appreciate it :)
webdestroya
2010-05-13 01:53:54
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?
ghoppe
2010-05-13 02:04:15
It is part of the element.. give it a rest already.
webdestroya
2010-05-13 02:07:36
@webdestroya and so is margin. that's my whole point.
ghoppe
2010-05-13 02:11:37
@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.
ghoppe
2010-05-13 02:13:27
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.
Beejamin
2010-05-13 02:45:54
+2
A:
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.
rebus
2010-05-13 01:06:25
+14
A:
I recommend this article for you. The diagram is from that article.
CodeToGlory
2010-05-13 01:07:55
A:
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.
Galen
2010-05-13 01:10:36
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: http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/)
ghoppe
2010-05-13 01:46:46
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.
Galen
2010-05-13 03:10:11
+1
A:
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/
ghoppe
2010-05-13 01:44:33