CSS Box Model

In the CSS box model, every element of your page in the body section is contained by a box that is comprised of content area, padding (area surrounding the content), border (area at the edge of the padding, may or may not be visible), and the margin (invisible area around the border). This box can be block level or inline and you can decide which if the selector's default doesn't suit your needs.

Margins

Margins may be set all at once or individually. margin: 10px; sets a ten pixel margin all around the element. margin: 5px 10px 15px 20px; sets the top, right, bottom, and left margins respectively. Equivalently, you may write margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px; for each individual margin.

Border

Applying borders can make your content stand out. To make the border visible, you need to specify a "border-style." Below are examples of each border style with "border-width: 2px 5px 10px 15px;" for the top, right, bottom, and left respectively. For this example, I've used "display: inline;" so each div won't take up so much vertical space.

Notice that different browsers render borders differently...

Solid border
Dotted border
Dashed border
Doubled border
Groove border
Ridge border
Inset border
Outset border

Padding

Padding gives your content some breathing room or white space. The examples below have a solid black one pixel border and a ten pixel margin all around. The only differences are the values for padding.

A paragraph with no padding.

A paragraph with 20 pixels padding.

A paragraph with "padding:0px 150px 30px 50px" or variably as with border and margin properties.

Height, Width, Float, and Overflow

Here is an example of a 150x100 pixel div which floats to the right. The extra text and the property "overflow:auto" make scroll bars appear when needed.

You may specify the height and width of an element as well as whether it "floats" to the left or right, much as the align attribute works in your image tag. However, if you lock down both dimensions, you need to specify where the "overflow" text goes if it doesn't fit in the box.

Some Useful Links

bottom graphic for DM 60A pages