∑ Math 〖Curves ◆ Surfaces ◆ Wallpaper Groups ◆ Gallery ◆ Software ◆ POV-Ray〗
Programing 〖Linux ◆ Perl Python ◆ HTML ◆ CSS ◆ JavaScript ◆ PHP ◆ Java ◆ Emacs ◆ ⌨ ◆ Unicode ♥〗
Web Hosting by 1＆1

CSS Margin vs Padding

Xah Lee, , …,

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>
<html>
<head>
<meta 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>
blog comments powered by Disqus