<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
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.
// P border style and color
// element background color
// border widths
// element margins
// H3 border style and color
// border widths
// element background color
<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>
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.
You can set the size of the margins for a block level element by specifying the
marginBottom properties. You can also use the pre-defined
margins() method to set all four properties simultaneously.
// 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);
You can set the width of the border surrounding a block-level element by specifying the
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
You can set the size of the padding surrounding a block level element by specifying the
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.
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
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.