BOX MODEL

The CSS Box Model 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 margin.
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 below 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, i.e. the box outside the box above. Examples are:

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

Border Style

Then "cut-out" border above is displayed by using the CSS property, border.

border and the individual borders, border-top, border-right, border-bottom, border-left, can be defined with the three attributes: width, style, and color.

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

Example are:

For a complete description of the layout properties, please see Microsoft 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:

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