Structure: Using CSS to structure space in html documents

More CSS space properties

padding properties

Padding is the space between the bounded box and the margin or border (if one has been set)

Box spacing

There are five padding properties you can use

padding-top

padding-right

padding-bottom

padding-left

padding: this can have between 1-4 of the above values

Each property can take one of two values:

length: can be pt, in, em, mm, cm

percentage: will be a percentage of the width of the parent element, so padding = 10% means moving the element 10% of its width

To set padding all the way around the box:

.pd { color: blue;
        background: yellow;
        font-size: large;
        padding: 2em
       }

And it looks like this

The effect of the padding is to push this text away from the lines above and below it and the left and right margins

Border properties

These properties allow individual elements in the page to be highlighted and set off

This is placed between the element's padding and its margin

There are twelve properties that can be used

Five are typically used to set the width, color, and style of the four parts of the border:

border-top

border-right

border-bottom

border-left

border: this can have between 1-4 of the above values

There is another set of border properties that can be used to set one border property in a rule:

border-color

border-style

border-top-width

border-right-width

border-bottom-width

border-left-width

border-width

border-color

This declaration sets the color of the border using one of the predefined colors or a numbered RBG or Hex color

You set the border colors in a single rule, although there are several possibilities

One value: applies to all four sides

Two values: the first applies to top and bottom, the second to right and left

Three values: the first applies to the top, the second to right and left sides, and the third to the bottom

Four values: they are applied top --> right --> bottom --> left

Here's a rule that will place a border around a text element:

.bor { color: red;
         background: yellow;
         font: 24pt Arial, Sans-Serif;
         border: double thick blue;
         padding: 1em
        }

Here's an example of a paragraph that uses a yellow background and a double thick blue border (with red text, as you can see) to provide an example of the border property in action. Here you can also see the effect of padding.

Next!

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssstructure3.html
Last updated 3.15.06 - H. Rosenbaum