CSS Box Model…

May 14th, 2007 Noor Posted in CSS |

Every block level element, like a p or div element, contains a top, right, bottom, and left edge. These sides of block elements are composed of three layers surrounding the content. So, therefore each block element contains four sections:

content

Actual content such as text, images, Java applets, and other objects. The content area is in the middle of the box.

padding

Surrounds the content area.

border

Next outer layer that surrounds padding and makes up the box border.

margin

Transparent box that begins at the edge of the border and expands beyond.

The default margin value is 0, which lines up with the edge of the border. A border with a value of 0 lines up with the padding edge.

here is the Box Model Illustrated below,,

in the next section will see some examples of the box model,,

I hope that this tutorial was informative and thank you for viewing