[Contents] [Prev page] [Next page] [Last page]

Format Properties for Block-Level Elements

JavaScript style sheets treat each block-level element as if it is surrounded by a box. (Block level elements start on a new line, for example, <H1> and <P> are block level elements, but <EM> is not.)

Each box can have padding, border, and margins.You can set values for top, bottom, left and right paddings, border widths, and margins.

The margins indicate the inset of the element from the edges of the document (or parent layer.) The padding indicates the distance between the element itself and the border.

The padding area uses the same background color or image as the element itself (which are set with the backgroundColor and backgroundImage properties).

The width of the box is the sum of the element width (that is, the width of the formatted text or image), the padding, and the border.

For example:

<STYLE TYPE="text/javascript">
// P border style and color
tags.P.borderStyle="3D";
// element background color
tags.P.backgroundColor="#CCCCFF";
tags.P.borderColor="blue";
// border widths
tags.P.borderWidthTop="5px";
tags.P.borderWidthBottom="5px";
tags.P.borderWidthLeft="5px";
tags.P.borderWidthRight="5px";
// paddings
tags.P.paddingTop="10px";
tags.P.paddingBottom="10px";
tags.P.paddingLeft="10px";
tags.P.paddingRight="10px";
// element margins
tags.P.marginLeft= 50;
tags.P.marginRight=50;
tags.P.marginTop=50; 
tags.P.marginBottom=50;
// H3 border style and color
tags.H3.borderStyle="solid";
tags.H3.borderColor="green";
// border widths
tags.H3.borderWidthTop="10px";
tags.H3.borderWidthBottom="10px";
tags.H3.borderWidthLeft="10px";
tags.H3.borderWidthRight="1opx";
// paddings
tags.H3.paddingTop="20px";
tags.H3.paddingBottom="20px";
tags.H3.paddingLeft="20px";
tags.H3.paddingRight="20px";
// element background color
tags.H3.backgroundColor="#DDFFDD";
</STYLE>
<H3>H3 With a Solid Border</H3>
<P>Borders have their uses in every day 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>

Example results:


H3 With a Solid Border

Borders have their uses in every day 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

You can set the size of the margins for a block level element by specifying the marginLeft, marginRight, marginTop, and marginBottom properties. You can also use the pre-defined margins() method to set all four properties simultaneously.

For example:

// manual assignment
	tags.P.marginTop = 30;
	tags.P.marginBottom = 50;
	tags.P.marginRight = 40;
	tags.P.marginLeft = 60;

The above manual assignment has the same result as the call to the margins() method shown below.

// assignment using a method
// margins(top, right, bottom, left)
tags.P.margins(30, 40, 50, 60); 

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

tags.BODY.margins(0, 20, 0, 20);

Setting Border Widths, Color, and Style

You can set the width of the border surrounding a block-level element by specifying the borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth properties. You can use the pre-defined borderWidths() method to set all four properties simultaneously.

You can set the style of the border by specifying the borderStyle property. The style can be either solid or 3D.

You can set the color of the border by spec ifying the borderColor property.

Setting Paddings

You can set the size of the padding surrounding a block level element by specifying the paddingTop, paddingRight, paddingBottom, and paddingLeft properties. You can also use the pre-defined paddings() method to set all four properties simultaneously.

Horizontal Dimensions

Technically, padding and margin properties are not inherited. But as the placement of an element is relative to ancestors and siblings, the parent element's padding and margin properties have an effect on their children.

The width of the left and right margins specify the minimum distance to the edges of surrounding boxes. 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.

Seven length units influence the horizontal dimension of a box: left margin, left border, left padding, width, right padding, right border, right margin. Added up, these have to be equal to the width of the parent element. Therefore, you cannot specify values for all properties and expect them to be honored. The relative strengths between them are as follows:

  1. left border
  2. right border
  3. left padding
  4. right padding
  5. width
  6. left margin
  7. right margin

By default, the value of the width property is auto which means it is automatically calculated based on the other properties' values.

However, if width is assigned another value, or the dimensions do not add up for other reasons, the property with the lowest rank (closest to 7) will be assigned auto (that is, it will be automatically calculated.)

Replaced Elements

A replaced element is an element which is replaced by content pointed to from the element. For example, in HTML, the <IMG> element is replaced by the image pointed to by the SRC attribute. Replaced elements often come with their own intrinsic width and height. If the value for width is auto, the intrinsic width is used as the width of the element. If a value other than auto is specified in the style sheet, this value is used and the replaced element should be resized accordingly (the resize method will depend on the media type). The height property is used in the same manner.



[Contents] [Prev page] [Next page] [Last page]

Copyright © 1997, Netscape Communications. All rights reserved.