CSS Details review notes-padding, borders, and margins

The padding, border, and margin properties of an element affect how the entire document is laid out, and, more importantly, the appearance of the given element is severely affected.

Height and width

These two properties cannot be applied to inline non-replacement elements whose height and width are determined by the content of the link, rather than by the author. Elements in the normal flow have very few set heights.

Margins and inner margins

If the element has a background, it affects the padding and margin, because the background extends to the inner margin, but not to the margin. The padding and margins specified for an element affect when the background of the element ends.

Adds 10 pixels of space to the sides of the content area, margin:10px, similar to the HTML hspace and vspace, to set extra space around an image. Margin follows the pattern:

Margin:top right bottom left. These values rotate clockwise around the elements, and if you want to render the effect you want, you must arrange the order of the values correctly. When one of the values defaults, the following rules are followed:

1) If the value of the left margin is missing, the value of the right margin is used.

2) If the value of the margin is missing, the value of the top margin is used.

3) If the value of the right margin is missing, the value of the top margin is used.

In other words, if you specify 3 values for the margin, the 4th value will be copied from the 2nd one. If a value of two is given, the 4th value is copied from the 2nd value, and the 3rd value is worth from the 1th.

One- sided outer margin attribute , for Margin:auto Auto 3em, equivalent to margin-left:3em; You can use a single margin-top, Margin-right, Margin-bottom and Margin-left single set margins.

The rules for negative margins and merge margins are discussed in the previous section: Vertical adjacent block-level element margins are merged in the normal flow. But when the margin is applied to inline non-replacement elements, she has no effect on row heights. Because the margin is actually transparent, this declaration has no visual effect, because the margin of a non-replacement element within the row does not change the row height of an element .

Note, however, that there is an additional space between the end of the word before the non-replacement element in the row and the boundary of the element background within the row. If you prefer, you can add this extra space on both sides of the element in the row:

<Pstyle= "FONT-SIZE:12PX;LINE-HEIGHT:14PX;">This is text<em>Some of which emphasized</em>, plus other text<BR>Which ID<Strongstyle= "Margin:25px;background:silver">Strongly emphasized</Strong>And which is<BR>larger than the surrounding text.</P>

The effect is as follows:

This is more interesting if negative margins are applied to non-replacement elements in the row. The upper and lower margins of an element are unaffected, and row heights are unaffected, but the left and right sides of the element may overlap with other content.

The substitution element differs: The margin set for the replacement element does affect the row height and may increase or decrease the row height, depending on the value of the top and bottom margins. The left and right margins of the in-line replacement element act the same as the left margin of the replacement element.

Border

Each border has 3 facets: its width or thickness, its style or appearance, and its color. The default style for borders is none, and you don't necessarily see borders. The default border color is the foreground color of the element itself, and if no color is declared for the border, it will be the same as the element text color.

Style of border

If a border has no style, there is no width, but in some cases you may want to create an invisible border. This introduces the border color transparent, which is used to create an invisible border with a width. This transparent border is equivalent to the padding, so the background of the element extends to the bounding area (assuming there is a visible background).

Percent value and inner margin

You can set a percentage value for the inner margin of an element. As with margins, the percentage value is calculated relative to the width of its parent element, so if the parent element's width changes, they will also change.

Note that the upper and lower padding and the left and right padding are always, that is, the top and bottom padding is calculated relative to the width of the parent element, not relative to the height.

CSS Details review notes-padding, borders, and margins