Chapter 4

Format Properties for Block-Level Elements

This chapter discusses the formatting options for block-level elements. Block-level elements start on a new line, for example, <H1> and <P> are block-level elements, but <EM> is not.

This chapter starts off by presenting an example that illustrates the various ways of formatting block-level elements. After that comes a section discussing each kind of formatting option in detail. The chapter and ends with a brief overview of the inheritance behavior of properties that are used for formatting block-level elements.

Block-level Formatting Overview and Example

Style sheets treat each block-level element as if it were surrounded by a box. Each box can have style characteristics in the form of margins, borders, and padding. Each box can have a background image or color.

The margins indicate the inset of the edge of the box from the edges of the document (or parent element). Each box can have a border that has a flat or three dimensional appearance. The padding indicates the distance between the element's border and the element's content.

You can also set the width of a block-level element, either to a specific value or to a percentage of the width of the document (or parent element). As you can imagine, it is redundant to set the left and right margin and to also set the width.

If values are specified for the width and for both margins, the left margin setting has the highest precedence. In this case, the value for the right margin indicates the absolute maximum distance from the right edge of the containing element at which the content wraps. If the value given for the width would cause the element to run past the right margin, the width value is ignored. If the width value would cause the element to stop short of the right edge, the width value is used.

You can set the horizontal alignment of an element to left, right, or center. You do this by setting the float property in CSS syntax or setting the align property in JavaScript syntax. It is also redundant to set the left and/or right margin and then also set the element's alignment.

The following example illustrates the use of margins, paddings, border widths, background color, width, and alignment properties.

CSS Syntax

<STYLE TYPE="text/css">

P {

  background-color:#CCCCFF;

  /* margins */

  margin-left:20%; margin-right:20%;

  /* border widths

  border-top-width: 10pt; border-bottom-width:10pt; 

  border-right-width:5pt; border-left-width:5pt;

  /* border style and color

  border-style:outset; border-color:blue;

  /* paddings */

  padding-top:10pt; padding-bottom:10pt;

  padding-right:20pt; padding-left:20pt;

}

H3 {

  /* font size and weight */

  font-size: 14pt;

  font-weight:bold;

  background-image:URL("images/grenlite.gif");

  /* center the heading with a 90% width */

  width:90%;

  float:center;

  border-color:green;

  border-style:solid;

  /* all sides of the border have the same thickness */

  border-width:10pt; 

  /* all sides have the same padding */

  padding:20pt;

}

</STYLE>

JavaScript Syntax

<STYLE TYPE="text/javascript">

with (tags.P) {

  backgroundColor="#CCCCFF";

  /* P border style and color */

  borderStyle="outset"; borderColor="blue";

  /* P border widths */

  borderTopWidth="10pt"; borderBottomWidth="10pt";

  borderLeftWidth="5pt"; borderRightWidth="5pt";

  /* P paddings */

  paddingTop="10pt"; paddingBottom="10pt";

  paddingLeft="20pt"; paddingRight="20pt";

  /* P margins */

  marginLeft= "20%"; marginRight="20%";

}

with (tags.H3) {

  backgroundImage ="images/grenlite.gif";

  /* font size and weight */

  fontSize="14pt"; fontWeight="bold";

  /* H3 border style and color */

  borderStyle="solid"; borderColor="green";

/* center the heading with a 90% width */

  width="90%"; align="center";

  /* all sides of the border have the same thickness */

  borderWidths("10pt");

  /* all sides have the same padding */

  paddings("20pt");

}

</STYLE>

Style Sheet Use

<H3>H3 with a Solid Border</H3>

<P>Borders have their uses in everyday life. For example, borders round 
a paragraph make the paragraph stand out more than it otherwise would.

</P>

<P>This is another paragraph with a border. You have to be careful not 
to make the borders too wide, or else they start to take over the page.

</P>

This example works in Netscape Navigator 4.0+. Example results:

H3 with a Solid Border

Borders have their uses in everyday life. For example, borders round a paragraph make the paragraph stand out more than it otherwise would.

This is another paragraph with a border. You have to be careful not to make the borders too wide, or else they start to take over the page.

Setting Margins or Width

The margins indicate the inset of the element from the edges of the document (or parent element.) You can set right, left, top, and bottom margins. The "edge" of the parent is the theoretical rectangle that would be drawn round the inside of the padding, border, or margins of the parent element, if it has any of these properties.

You can set the values of the margins for a block-level element by specifying the following properties (shown as CSS syntax/JavaScript syntax property names):

You can set the horizontal alignment of an element to left, right, or center. You do this by setting the float property in CSS syntax or setting the align property in JavaScript syntax. It is redundant to set the left and/or right margin and then also set the element's alignment.

Instead of setting specific margin values, you can also set the width property. You can set this to either a specific value (for example, 200pt) or to a percentage of the width of the containing element or document (for example, 60%). If desired, you can set the width and either the left or right margin, so long as the total does not exceed 100% of the width of the parent. It is not useful, however, to set the width and also to set both margins, since two of the values imply the third. (For example, if the left margin is 25% and the width is 60%, then the right margin must be 15%.)

Two or more adjoining margins (that is, with no border, padding or content between them) are collapsed to use the maximum of the margin values. In the case of negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins.

To set the default margins for everything in a document, you can specify the margin properties for the <BODY> tag. For example, the following code sets the left and right margins to 20 points.

CSS Syntax

<STYLE TYPE="text/css">

BODY {margin-left:20pt; margin-right:20pt;} 

</STYLE>

JavaScript Syntax

<STYLE TYPE="text/javascript">

with (tags.BODY) {

  marginLeft="20pt"; marginRight="20pt";

}

</STYLE>

Setting Border Widths, Color, and Style

You can set the width of the border surrounding a block-level element by specifying the following properties (shown as CSS syntax/JavaScript syntax values):

You can set the style of the border by specifying the border-style (CSS syntax) or borderStyle (JavaScript syntax) property. You can give the border a flat appearance by setting the border-style to solid or double, or you can give it a 3D appearance, by setting the border-style to groove, ridge, inset, or outset.

You can set the color of the border by specifying the border-color (CSS syntax) or borderColor (JavaScript syntax) property.

For an example of each of the border styles, see:

borders.htm

Setting Paddings

The padding indicates the distance between the border of the element and its content. The padding is displayed even if the element's border is not displayed.

You can set the size of the padding surrounding a block-level element by specifying the following properties (shown as CSS syntax/JavaScript syntax values):

Inheritance of Block-Level Formatting Properties

The width, margins, border characteristics, and padding values of a parent element are not inherited by its child elements. However, at first glance it might seem that these values are inherited, since the values of the parent elements affect the child elements.

For example, suppose you set the left margin of a DIV element to 10 points. You can think of this DIV element as a big box that gets inset by 10 points on the left. Assume that the DIV element has no border width and no padding. If all the elements inside the DIV have a margin of 0, they are smack up against the edge of that box. Since the box is inset by 10 points, all the elements end up being inset by 10 points.

Now consider what would happen if the child elements did inherit the margin value from their parent element. If that were the case, then the DIV block would have a left margin of 10 points, and child elements would also each have a left margin of 10 points, so they would be indented on the left by 20 points.