What's the difference between padding and margin?

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

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

1 uhh. Why is this being voted up? According to the CSS box model this is untrue.

W3. Org/TR/CSS2/box. Html – ghoppe May 13 '10 at 1:09 1 @ghoppe - What are you talking about?

Margin is the spacing around/outside an element. Padding is internal. – Mitch Dempsey May 13 '10 at 1:10 1 @ghoppe that really doesn't change my answer.

He didn't mention width, he asked the difference. – Mitch Dempsey May 13 '10 at 1:11 1 @ghoppe ... your picture just confirms my post. Look at what everyone else is saying in theirs, we are all correct.

– Mitch Dempsey May 13 '10 at 1:13 1 @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 May 13 '10 at 2:13.

I recommend this article for you. The diagram is from that article. elegantcode.com/2010/01/26/css-basics-th....

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.

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. 456bereastreet.com/archive/200612/intern....

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. redmelon.net/tstme/box_model.

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/…) – ghoppe May 13 '10 at 1: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 May 13 '10 at 3:10.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.