BOX MODEL

The CSS Box Model, which applies to every object, is one of the most important concepts to understand when using CSS. It has four components:

Margin	Space between the margin and other objects.
Border	Space between the padding and the marign.
Padding	Space between the contents and the border.
Contents	What is contained within the object, e.g. text, graphics.

These four components determine how the objects fits with the other objects on the screen. The illustration to the right shows how the four are related. The margin, border, and the padding can have top, right, bottom, and left sides can have their layout properties individually defined.

The margin and padding have only one attribute, length, which can be in a number (cm, mm, in, pt, pc, or px) or a percentage (x%) of the parent object. The parent object is the object that contains the current object. Examples are:

• margin-left:10px
• padding-bottom:5px
• margin:10px 5px 0px 8px

The last example illustrates the use of the margin:top right bottom left to define all four margin lengths at one time. This concept can be use with padding.

border has three attributes: width, style, and color. An individual border can be defined with border-top, border-right, border-bottom, and border-left. Examples are:

• border-top: width style color;

Please note that there are no semi-colons between the properties!

width	Number or percentage
style	none (Default),dotted, dashed, solid, double, groove, ridge, inset, outset.
color	Hexadecimal or color name

A partial list of layout properties for certain HTML tags can be seen at Tag Properties. For a complete list of the layout properties, please see microsoft's workshop.

In addition, each of these can be further defined with by adding width, style, or color to the above, e.g. border-bottom-style or border-bottom-color. Examples are:

• border-top-style:dashed
• border-bottom-color: blue

Here are two examples:

HTML CODE	RESULTS
<div style="padding:10 5 10 5; border:2 dashed blue; margin:10 10 10 10">	This is a CSS box
<div style="padding-top:20; border-bottom:5 dashed green; margin-left:30; border-top:1 solid red;border-right:2 dotted purple; border-left:5 groove brown;>	This is a CSS box