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 and margins.
The padding area uses the same background as the element itself (which is set with the background
property). The margins are always transparent, so the parent element shines through.
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.
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
with(tags.P) {
marginTop = 30;
marginBottom = 50;
marginRight = 40;
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);
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.
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.
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:
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.)
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.