How are margins, borders, padding, and content related?
Author: Deron Eriksson
Description: This CSS tutorial examines the box model, which describes how margins, borders, padding, and content are related.
Tutorial created using: Windows XP


Page: < 1 2

(Continued from page 1)

The style-test.html page below has several examples of different margin, border, and padding sizes. The border color is red. The padding color (around the content) is lime. Since the margin is always transparent, I set the surrounding div backgrounds to yellow so that the margin color would appear yellow.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
body { background-color: aqua; margin: 0; }
div { background-color: lime; }
div.yellow { background-color: yellow; border: 1px solid black; }
</style>
</head>
<body>
<div class="yellow"><div style="margin: 0px;">0px margin</div></div>
<div class="yellow"><div style="margin: 5px;">5px margin</div></div>
<div class="yellow"><div style="margin: 10px;">10px margin</div></div>
<div class="yellow"><div style="margin: 0px; border: 0px;">0px margin, 0px border</div></div>
<div class="yellow"><div style="margin: 5px; border: 5px solid red;">5px margin, 5px border</div></div>
<div class="yellow"><div style="margin: 10px; border: 10px solid red;">10px margin, 10px border</div></div>
<div class="yellow"><div style="margin: 0px; border: 0px; padding: 0px;">0px margin, 0px border, 0px padding</div></div>
<div class="yellow"><div style="margin: 5px; border: 5px solid red; padding: 5px;">5px margin, 5px border, 5px padding</div></div>
<div class="yellow"><div style="margin: 10px; border: 10px solid red; padding: 10px;">10px margin, 10px border, 10px padding</div></div>
</body>
</html>

The display of style-test.html in IE7 is shown below.

margin, border, padding, and content example
Page: < 1 2