box model


The box model is a very important concept in CSS because it determines how elements are positioned within the browser window. It gets its name because CSS treats every element as if it were in a box .


name Description
border Even if you cannot see it, every box has a border. This separates the edge of one box from other surrounding boxes.
margin The margin is the distance between the border of a box and the box next to it.
padding This padding is the space between the content of the box and its border.

You can use CSS to individually control the border, margin, and padding on each side of a box; you can specify a different width, line - style and color for each side of the boxes ’ border.


The padding and margin properties are especially important in creating what designers refer to as white space ; this is the space between the various parts of the page. For example, if you have a box with a black border and the box contains black text, you would not want the text to touch the border because it would make the text harder to read. Giving the box padding helps separate the text from the line around the edge.


	      	<!DOCTYPE html>
			<html>
			<head>
			<title>Understanding the Box Model</title>
			<style type="text/css">
				body, h1, p, img, b {
				border-style:solid;
				border-width:2px;
				border-color:#000000;
				padding:2px;}
			</style>
			</head>
			<body>
			<h1>Thinking Inside the Box</h1>
			<p class=”description”>When you are styling a web page with CSS 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>
			<img src=”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>