topical media & game development
basic-web-html-07-ch07-eg21.htm / htm
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
head
<head>
<title>Understanding the Box Model</title>
<link rel="stylesheet" type="text/css" href="basic-web-html-07-ch07-eg21.css" />
</head>
body
<body>
<h1>Thinking Inside the Box</h1>
<p class="description">When you are styling a web page with CSS page you
must start to think in terms of <b>boxes</b>.</p>
<p>Each element is treated as if it generates a new box. Each box can have
new rules associated with it.</p>
image(s)
<img src="basic-web-html-07-images-boxmodel.gif" alt="How CSS treats a box" />
<p>As you can see from the diagram above, each box has a <b>border</b>.
Between the content and the border you can have <b>padding</b>, and
outside of the border you can have a <b>margin</b> to separate this box
from any neighboring boxes.</p>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.