CSS attributes:
2. BOX Model attributes
What is BOX? CSS uses <somesign> ...... </Somesign> is called a BOX (container). a box has three types of attributes: padding, margin, and border.
Margin attributes:
The Margin attributes are divided into five attributes: margin-top, margin-right, margin-bottom, margin-left, and margin, respectively, indicating the distance between the content in the BOX and the border, its attribute value is a numerical unit, which can be a length, percentage, auto, margin, or even a negative value, causing overlapping display between the BOX and the BOX. For details about the attributes of margin, see the following table:
Attribute name: 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left'
Property value: <margin-width>
Initial value: 0
Target objects: all elements
Inherit?: no
Percentage remarks: the width relative to the BOX
For example:
H1 {margin-top: 2em}
H2. {margin-right: 12.3%}
There is also a quick writing method for Margin, that is, using the margin attribute directly, for example:
BODY {margin: 1em 2em 3em 2em}
Equivalent:
BODY {
Margin-top: 1em;
Margin-right: 2em;
Margin-bottom: 3em;
Margin-left: 2em;
}
The margin attribute can be followed by four values separated by spaces (remember not to use commas), and the order is "upper right bottom left". Of course, there can be less than four values after margin, for example:
BODY {margin: 2em}/* All margin values are set to 2em */
BODY {margin: 1em 2em}/* the upper and lower margin values are 1em, and the right left margin values are 2em */
BODY {margin: 1em 2em 3em}/* the margin is 1em, the right left margin is 2em, and the lower margin is 3em */
Padding attributes:
The Padding attribute is used to describe how much space is inserted between the border and content of the BOX. It is similar to the margin attribute. It can also be divided into the upper right, lower left, and a shortcut padding. For details about the attributes of padding, see the following table:
Attribute name: 'padding-top ', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'
Attribute value: <padding-width>
Initial value: 0
Target objects: all elements
Inherit?: no
Percentage remarks: the width relative to the BOX
For example:
BLOCKQUOTE {padding-top: 0.3em}
The padding attribute is omitted here, similar to the margin attribute.
Border attributes:
When we look at HTML documents, we can see a piece of text and will not regard it as a BOX. In fact, the BOX has a border, but it is not displayed at ordinary times, the border attribute is used to describe the BOX border. Border attributes include border-width, border-color, and border-style. These attributes have branches.
1st 2 pages
