CSS Margin vs Padding

Advertise Here For Profit

Xah Lee, 2010-03-15, 2010-07-30

This page explains what's the difference between css's “margin” and “padding”.

In css, you can draw border around a block, like this:

p {border:solid thin red}

Once you draw a border, the difference between margin and padding becomes clear.

Padding is the area insider the border, margin is the area outside the border. The border here is the black line between yellow and red.

Testing Template

Here's a template you can play with.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>test CSS margin vs padding</title>
<style type="text/css">
div.wrapper {background-color:green}
p {border:solid thin red; background-color:yellow;
padding:10px;
margin:90px;
}
</style>
</head>
<body>

<div class="wrapper">
<p>test one</p>
<p>test two</p>
</div>

</body>
</html>

You can download this template at: css_margin_vs_padding_sample_template.html.gz.

✍