Shulou(Shulou.com)05/31 Report--

In this article, Xiaobian introduces in detail how to use the attributes of padding and margin in CSS. The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use padding and margin attributes in CSS" can help you solve your doubts.

Detailed introduction and examples of two important attributes of padding and margin in CSS

Note: why not translate margin and padding? First, there are no corresponding words in Chinese; second, even if there are such words, because margin and padding must be used when writing CSS code, if we always use Chinese words to explain them, it is easy to confuse the concepts of margin and padding in practical application.

The margin and padding properties are described as follows:

1. Margin: including margin-top, margin-right, margin-bottom, margin-left, controls the distance between block-level elements, which are transparent and invisible. For Fig. 2, the upper, right, lower and left margin values are all 40px, so the code is:

Margin-top: 40px; margin-right: 40px; margin-bottom: 40px; margin-left: 40px

According to the clockwise rules of top, right, bottom and left, it is abbreviated as

Margin: 40px 40px 40px 40px

When the upper and lower, the left and right margin values are the same respectively, which can be abbreviated as:

Margin: 40px 40px

The former 40px represents the upper and lower margin values, and the latter 40px represents the left and right margin values.

When the upper and lower margin values are the same, it can be abbreviated as:

Margin: 40px

2. Padding: including padding-top, padding-right, padding-bottom, padding-left, control block-level elements, the distance between content and border, its code, abbreviated please refer to the margin attribute writing.

At this point, we have a basic understanding of the basic use of the margin and padding attributes. However, in practical applications, there are always some things that you can't figure out, and they are more or less related to margin.

Note: when you want the content of two elements to be separated in the vertical direction (vertically), you can choose either padding-top/bottom or margin-top/bottom, and this Jorux recommends that you try to use padding-top/bottom to achieve your goal, this is because there is a Collapsing margins (folded margins) phenomenon in CSS.

Collapsing margins: margins folding exists only in vertical margin of adjacent or subordinate elements. The textual description may be confusing. Here is an example to illustrate the margin-collapsing phenomenon.

Example: write the following code between html files:

Margins of ID1 and ID2 collapse vertically. The margins of the element ID1 and ID2 collapses in the vertical direction. .h2 > div >

Write in the CSS file to which you are exposed:

* {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 interpretation:

1. The code written in html indicates that two block-level elements div and H2 with id of ID1 and ID2 respectively are inserted into html

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

3. # ID1 {... }: the element div that makes id ID1 has a background color of # 333, a font color of # FFF, and a margin-top/bottom of 10px

4. # ID2 {... }: the font size of H2, which makes id ID2, is 14px, verdana font, line height is 150% of font height, normal thickness. Margin-top/bottom is 30px, the border is 1px wide, red solid line.

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

That is, margin-top/bottom=ab=ef=10px of ID1

Margin-top/bottom=bc=de=30px of ID2

But when you open the html file with a browser, you get the effect of Example4, as shown in the following figure (Fig. 4)

That is, ab=cd=30px, ID1's margin-top/bottom=10px has been folded, and the margin black background of ID1 has also been folded and disappeared.

Why ◆ collapses:

The reason for this is that we do not declare id as the height of the element div of ID1 in CSS, so its high is set to auto. Once its value is set to auto, the browser will assume that its height is the distance from the border-top of the child element ID2 to the border-bottom, that is, the length of the bc in Fig. 4, so the margin-top/bottom (30px) of the child element ID2 extends beyond the parent element ID1, creating a blank area between ab and cd in Fig. 4. So the "red apricot" of the margin-top/bottom factor element of the parent element ID1 is folded and disappears.

How to solve the folding problem: maybe your first idea is to solve the problem according to the cause of folding-auto. However, in practice, it is impossible for us to know in advance how high some elements are, such as div, H2, p, etc., so it is impossible to solve the folding problem by declaring the height of elements in CSS files.

We need to add the following code (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 height of the ID1 so that it is the distance between the outer top/bottom of the margin-top/bottom of the child element ID2, that is, the distance of the be in Fig. 3.

After reading this, the article "how to use padding and margin attributes in CSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.