CSS Margin vs Padding

Perm url with updates: http://xahlee.org/js/css_margin_vs_padding.html

CSS Margin vs Padding

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.

css padding vs margin

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.

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs