Key to HTML and CSS-Box Model)

Reproduced (http://blog.sina.com.cn/s/blog_4bcf4a5e010007h8.html)

As the last article in the attribute article, this article describes the key of HTML and CSS-the box model (Box Model). The key to understanding the box model is the margin and padding attributes. Correct understanding of these two attributes is also the key to learning to use CSS layout.

Note: Why not translate margin and padding? Cause 1: there are no corresponding words in Chinese. Cause 2: even if such words exist, margin and padding must be used when writing CSS code, if we always use Chinese words to replace them, the concepts of margin and padding will be confusing in actual applications.

If there is a little HTML basics, you should understand some basic elements (Element), Such as P, H1 ~ H6, BR, Div, Li, UL, IMG, etc. If these elements are subdivided, they can be classified as top-level (Top-level) Element, block level (Block-level) Element and inline (Inline) Element.

1. block-level element: it can exist independently. Generally, block-level elements are separated by line breaks (such as a line after a paragraph ends. commonly used block-level elements include: P, H1 ~ H6, Div, UL, etc;

2. inline element: it is attached to other block-level elements and displayed immediately between connected elements without line breaks. Commonly Used inline elements include: IMG, span, Li, BR, etc;

3. Top-level element: contains HTML, body, and frameset, which is a block-level element.

Block-level elements constitute the main and key elements of an HTML, and any block-level element can be explained using the box model.

Box Model: Any block-level element consists of content, padding, background (including background color and image), border (Border), and margin. the three-dimensional diagram is as follows (fig. 1 ):

The plot is as follows (Fig. 2 ):

Based on the above two figures, I believe you will have an intuitive understanding of the box model.

The following describes the attributes of margin and padding:

1. MarginIncluding margin-top, margin-right, margin-bottom, and margin-left to control the distance between block-level elements. They are transparent and invisible, for fig. the upper right and lower left margin values shown in 2 are both 40px, so the code is:

Margin-top: 40px;
Margin-Right: 40px;
Margin-bottom: 40px;
Margin-left: 40px;

Based on the clockwise upper, right, bottom, and left rules, abbreviated

Margin: 40px 40px 40px 40px;

For easier memory, see:

When up and down, the left and right margin values are the same, which can be abbreviated:

Margin: 40px 40px;

The first 40px represents the upper and lower margin values, and the last 40px represents the left and right margin values.

When the upper, lower, and left margin values are the same, the value can be abbreviated:

Margin: 40px;

2. padding: Includes padding-top, padding-right, padding-bottom, and padding-left. It controls the distance between content and border within the block-level element. Its code is as follows, for short, see the description of the margin attribute.

Now, we have a basic understanding of the basic usage of the margin and padding attributes. however, in practice, there are always things that you cannot figure out, and they are more or less related to margin.

Note: To separate the content of two elements in vertically, you can select padding-top/bottom or margin-top/bottom, we recommend that you use padding-top/bottom as much as possible to achieve your goal. This is because there is collapsing margins in CSS.

Collapsing margins: Margins folding only exists in adjacent or subordinate elements. In vertical margin, text description may be confusing. The following example shows the margin-collapsing phenomenon.

Example: Write the following code between HTML files:

Write in the CSS file that is external to it:

*{
Padding: 0;
Margin: 0;
}
# Id1 {
Background-color: #333;
Color: # FFF;
Margin-top: 10px;
Margin-bottom: 10px;
}
# Id2 {
Font: normal 14px/1.5 verdana, sans-serif;
Margin-top: 30px;
Margin-bottom: 30px;
Border: 1px solid # f00;
}

Code explanation:

1. The code written in HTML indicates that two block-level elements Div and H1 with IDs id1 and Id2 are inserted in HTML;

2. * {padding: 0; margin: 0;}: returns the default padding and margin values of the browser to zero;

3. # id1 {...} : Set the background color of the element Div whose ID is id1 to #333, the font color to # fff, And the margin-top/bottom to 10px;

4. # Id2 {...} : Set the font size of element H1 with ID Id2 to 14px and verdana. The Row Height is 150% higher than the font height and the normal width. the value of margin-top/bottom is 30px, the border is 1px wide, and the solid red line is displayed.

Based on the above explanation, we should get the following results (Fig. 3 ):

That is, the id1 margin-top/Bottom = AB = EF = 10px;

Margin-top/bottom of Id2 = BC = de = 30px;

However, when you open an HTML file in a browser, the following results are displayed, for example (Fig. 4 ):

That is, AB = Cd = 30px, And the id1 margin-top/Bottom = 10px isFoldAnd the margin black background corresponding to id1 is collapsed.

Why do they fold: The reason for the above phenomenon is that we didn't declare the height (high) of the element Div whose ID is id1 in CSS, so its height is set to auto (automatic) now. once its value is set to Auto, the browser will regard its height as the distance from border-top to border-bottom of the child element id2. 4, so the margin-top/bottom (30px) of the child element Id2 extends out of the parent element id1. 4. blank area between AB and CD. therefore, the "apricot wall" of the margin-top/bottom factor element of the parent element id1 is collapsed and disappears.

How to solve the folding problem: You may first think of auto to Solve the Problem Based on the cause of collapse. however, in actual operations, some elements, such as Div, H1, and P, cannot be pre-identified, therefore, the folding problem cannot be solved by declaring the height of elements in CSS files.

We need to add the following code (in red) to the CSS file ):

# Id1 {
Background-color: #333;
Color: # FFF;
Margin-top: 10px;
Margin-bottom: 10px;
Padding-top: 1px;
Padding-bottom: 1px;
}

Or:

# Id1 {
Background-color: #333;
Color: # FFF;
Margin-top: 10px;
Margin-bottom: 10px;
Border-top: 1px solid #333;
Border-bottom: 1px solid #333;
}

By adding the above Code,The browser can re-calculate the height of id1, so that it is the distance between the margin-top/bottom outer edge (outer top/bottom) of the sub-element id2.The distance from "be" in "3.

It seems a little confused. The folding problem is difficult. It was also a problem that plagued me for a long time. In addition, I have not provided sufficient instructions, which makes it more difficult for everyone to learn, sorry.