shadowline
List Style << Spacing >> Positioning
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.

spacing image



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
pxPixels
ptPoints
inInches
cmCentimeters

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.

List Style << Spacing >> Positioning
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow