Html basics (3): graphic CSS padding, margin, and border attributes

The padding, margin, and border attributes of CSS are illustrated.

Margin: edge, so it is on the outermost side of the overall structure.

Border: boundary, what boundary? Is the boundary between margin and padding.

Padding: Fill. The filling action is clearly filled in. Therefore, after the padding value is added, the padding will increase in size.

W3C recommends placing all the images on the web page in a box. Designers can create definitions to control the attributes of this box, these images include paragraphs, lists, titles, images, and layers. The box model mainly defines four areas: content, padding, border, and margin ). For beginners, it is often difficult to understand the levels, relationships, and mutual influences between margin, background-color, background-image, padding, content, and border. Here we provide a 3D box model for your understanding and memory.

• Margin: blank outside the border of the layer
• Background-color: Background Color
• Background-image: Background Image
• Padding: blank between the border of the layer and the content of the layer
• Border: border
• Content: Content

Details and examples of two important attributes: padding and margin

This article describes the key to 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 three-dimensional map from: http://www.cncfan.com/url.asp? Url = http://www.hicksdesign.co.uk/(under the creative
Commons license)

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 in jorux 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 <body> </body> of an HTML file:

<Div id = "id1">
<H1 id = "ID2"> margins of id1 and Id2 collapse vertically. <br/> margins of id1 and Id2 are folded vertically. </Div>

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 result of example4 is 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 recalculate the id1 height 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.

Additional:

The number of parameters in the padding attribute in CSS, for example:

Body {padding: 20px ;}

Body {padding: 20px 30px ;}

Body {padding: 20px 30px 10px ;}

Body {padding: 20px 30px 10px 20px ;}

Details are as follows: 

If only one edge is provided, all four edges are used;

If two values are provided, the first value is used for top-bottom and the second value is used for left-right;

If three are provided, the first is used for the top, the second is used for the left-right, and the third is used for the bottom;

If all four parameter values are provided, the top-right-bottom-left parameters are added to the four sides.

Body {padding: 36px;} // The patch margins on the four sides of the object are all 36px

Body {padding: 36px 24px;} // The patch margin of the upper and lower sides is 36px, and the patch margin of the left and right sides is 24px

Body {padding: 36px 24px 18px;} // The patch margins of the top and bottom sides are 36px and 18px respectively, and the patch margins of the left and right sides are 24px.

Body {padding: 36px 24px 18px 12px;} // the top, right, bottom, and left patch margins are 36px, 24px, 18px, and 12px, respectively.