CSS Surrounding Element Properties

Introduction
This is part 5 of my series, Basics of CSS2. In this part of the series I talk about the padding, border and margin of an element. In the previous part I talked about the CSS Box, where these surrounding features where introduced. You should read that part before reading this one.

Look at the BODY element of a typical web page critically; you would realize that it has margin areas. It might also have borders, if the web site designer gave it borders (however, this is hardly done for the BODY element). DIV elements, Paragraph elements, inline elements (e.g. SPAN) all have padding, border and margin areas. With many of the elements, in the default situation, the padding and/or border and/or margin may not be present.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The Padding Property
You can determine the width of the padding area of an element. The following example illustrates this for the BODY and a DIV element:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

body {padding:100px}
div {padding:75px; width:50%; border:solid 2px blue}

This is the Body element with 100px padding.

This is the DIV element with 75px padding.

Try the above code. The padding width of the BODY element is 100px; that for the DIV is 75px. I chose large numbers for emphasis. Right now, do not worry about the other things you see in the DIV's CSS rule. The unit of pixel has been used. If we had used the Percentage for the DIV, it would have been relative (measured with respect to) the width of the containing element, BODY. Note: the BODY element does not really have a containing element, while the other elements (DIV, Paragraph, SPAN, etc.) do.

So to give padding to an element, use the property name "padding", followed by a colon, and then value and unit, in the CSS rule. If you do not give an element a padding value, the browser chooses one for you. What the browser chooses is usually OK. The problem is that different browsers may choose different values, for the same property and for the same element.

The Border Property
To give the border property, you need the property name, border, followed by a colon and then a three-in-one value. The three-in-one value consists of the border-style, the width of the border and the color of the border. The individual values of the three-in-one are separated by spaces.

The above code illustrates this. The DIV element has a blue border. In the three-in-one, the border-style is solid, the border-width is 2px and the border-color is blue.

Border-styles and their values as given in the CSS2 specification are as follows:

none
No border. This value forces the computed value of 'border-width' to be '0'.
hidden
Same as 'none', except in terms of border conflict resolution for table elements (see later).
dotted
The border is a series of dots.
dashed
The border is a series of short line segments.
solid
The border is a single line segment.
double
The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
groove
The border looks as though it were carved into the canvas (surface).
ridge
The opposite of 'grove': the border looks as though it were coming out of the canvas.
inset
The border makes the entire box look as though it were embedded in the canvas.
outset
The opposite of 'inset': the border makes the entire box look as though it were coming out of the canvas.

Note: if you do not want a border, you will not use the three-in-one value. You will use either the style value alone set to "none", or the width value alone, set to 0px.

The Margin Property
The margin is given in a similar way like padding. It could be something like

margin:3px

or

margin:0px

You use 0px when you do not want any margin. The following code shows a margin-width of 10px for the BODY element. Try the code and in this case do not worry if the result is not the way you expected; browser interpretation in this case is not very good.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

body {margin:10px; border: solid 2px black}

This is the Body element with a margin-width of 10px.

Properties and their values chosen by Browsers
If you do not give a padding and/or border and/or margin value, for any element, the browser chooses one for you. The problem is that the value chosen for a particular property and element differs with browsers.

That is it, for this part of the series. We continue in the next part.

Chrys