Spacing

Each object, text or image, has three invisible boxes around them. These are PADDING, BORDER, and MARGIN. Each box has its own set of properties and values.

Padding and Margins

If you've worked with TABLES, you may have come across the CELLPADDING property. This places a buffer area between the cell wall and the contents within the cell. The CSS version of padding works the same way. It places an invisible buffer between the border area and the text/object it surrounds. Margin is an invisible buffer between the border and the NEXT text/object on the page.

PADDING PROPERTIES

• padding
• padding-top
• padding-bottom
• padding-left
• padding-right

MARGIN PROPERTIES

• margin
• margin-top
• margin-bottom
• margin-left
• margin-right

There are properties for each side of the padding and margins. This means there is total control over how much space is created (or not) on each individual side. The first properties padding and margin are used to format all sides as a group.

The values for PADDING and MARGIN are measured in :

• px: Pixels
• pt: Points
• in: Inches
• cm: Centimeters

An example of setting margin values:

• The example above shows that anything within a P area will have a margin buffer of 2 inches on the left side.
• The h3 example shows a margin grouping. The four numbers represent the four sides of the margin area. The order goes in a clockwise rotation : TOP, RIGHT, BOTTOM, and LEFT.
• The H4 example shows the margin property again, but this time only one value is set. This one value will affect all 4 sides. If two text/objects with margins meet, the browser adds the margins together. Example : If one text/object has a margin of 10px, and the next text/object has a margin of 30px, there will be a space of 40px between them.

Declaring a negative value to margins makes it possible to overlap a text/object with another. Unfortunately, different browsers view margins in different ways, so the outcome will not always be what you want. The best way to create an overlap effect is by using a positioning property.

Borders

Setting the borders for a text/object can be tricky. IE and Netscape tend to view the border differently. So this is another "try it and test it" situation.

There are three properties associated with the BORDER command. These are width, style, and color. To make the border properties work in both IE and Netscape, you need to declare at least the WIDTH and STYLE of the border.

An example of setting border values of images on the page :

The above example will eliminate any borders around any images.

border-width specifies the thickness of the border. This can be specified as px (pixels),pt (points),cm (centimeters), or in (inches).

border-style specifies a type of border.

Here are the different types of STYLES that will work in IE. Netscape is unreliable on borders, so these next settings are mainly for the IE viewers. (The following example was made with the BORDER-WIDTH set to 3px to show them better.)