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 :

VALUE MEASUREMENTS
px	Pixels
pt	Points
in	Inches
cm	Centimeters

An example of setting margin values :

<style type="text/css"> <!-- p {margin-left: 2in;} h3 {margin: 10px 20px 10px 20px;} h4 {margin: 10px;} --> </style>

• 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 an 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.

Note : IE creates a border around the full line of the content involved on the web page. Netscape creates a border just around the content involved.

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

<style type="text/css"> <!-- img {border-width: 0px; border-style: none;} --> </style>

The above example will elliminate 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.)

BORDER STYLES
solid
double
groove
ridge
inset
outset

The next property is border-color. Using a hex number, color can be added to the borders.

<style type="text/css"> <!-- p {border-width: 5px; border-style: double; border-color: #ff0000;} --> </style>

and in the BODY area, add in a text line to show this example :

<p> This is a test. </p>

The outcome is :

This is a test.

You can get the same outcome of the above if you GROUP your border properties together under the main BORDER property. The values go in order of WIDTH STYLE COLOR. Notice there are no separators between the values.

<style type="text/css"> <!-- p {border: 5px double #ff0000;} --> </style>

The outcome is again :

This is a test.

Tip : Want to create a border around just the words and not go acreoss the screen width? Enter your text into a TABLE as seen below.

Using the same embedded CSS as above, change the BODY area code to look like this :

<table> <tr> <td> <p> This is a test. </p> </td> </tr> </table>

The outcome will chage to this now :

This is a test.