Margin and padding

HTML & CSS
1 
<!doctype html>
<html> 
  <head>
    <meta charset="UTF-8">
    <title>padding100</title>
    <style type="text/css"> 
    * {margin:0;padding:0}
   </style> 
</head> 
<body style="margin:10px;padding:100px;"> 
padding 100
</body> 
</html>

The result of the code above is at http://dot.kr/x-test/padding100.php .

The result of the code below is at http://dot.kr/x-test/margin100.php .

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>margin100</title>
    <style type="text/css"> 
      * {margin:0;padding:0}
    </style> 
</head>
 
<body style="margin:100px;padding:10px;"> 
margin 100
</body> 
</html>

I think they are same in effect.
I like to know the essential difference between margin and padding.
I like to know the meaning of them in CSS.

2

padding and margin are different

the css box model should explain.

3

Thank you. the css box model says it clear.

4

You’ve missed one thing: the border.

Put a border in there and things should clarify by them self: margin has to do with the neighbours of an element (in relation with the outside), padding has to do with the content of an element (in relation with the inside).

Border: a name chosen not on a whim.

Margin: outside buffer. Padding: inside buffer.

Margin: outside “padding”. Padding: inside “margin”.

5

I agree with you here noonnope, I find the explanation at W3 not realy clear. The only difference they mention is the background color

6

it’s also VERY IMPORTANT to note that padding and borders don’t interact with each other. It not something you would foresee in Joon’s code, above. but if you had to elements lets say P like this and p {margin: 0; padding:15px; border:none }

<p>text</p>
<p>more text</p>

the distance between the text would be: 30px ( 15px of padding bottom from the first P and 15px of padding top from the second P)

however if the CSS was {margin: 15px; padding:0; border:none }
the distance would be 15px!!! that is margin collapse… it unexpected at first , but I have found it can be harnessed and quite useful.

BUT WAIT THERE IS MORE!
If the CSS is {margin: 15px; padding:1px; border:none } or {margin: 15px; padding:0; border:1px solid pink }

the distance is now 32px!?!?! Yes, even tho the margin is outside the the border and/or padding interferes with its collapse so you sum all the attributes up to get the distance:
margin top+ margin bottom + Border top+ border bottom+ padding top+padding bottom,
remembering of course that the margin distance will always be transparent , the padding will take on the background color of the element and the border can have its own color, or be transparent ( but when the border IS TRANSPARENT… it will show the Background color of the element through)

another thing is: you can have NEGATIVE margins p{margin:-5px} which would move things towards each other rather than away… but there is no such thing as negative padding…

Also while padding and margins can use px, em or %, borders only take px or ems

other than the proverbial BOX MODEL… which is of little concern if you aren’t developing for IE previous to 6, AND use STRICT DOC TYPES…

that’s padding/margin/borders 101

7

Thank you. it’s quite informative structurely.

8

Very well explained dresden_phoenix, I suggest you write the explanations for W3 from now on :wink:

9

Also I’d point out that due to some browser oddities I would NEVER apply margin OR border to body.

Just saying. It’s like trying to apply styling to HTML, it’s just not predictable enough to be trusted.