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

This article mainly introduces the "CSS how to use margins attribute folding phenomenon insider" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, hope that this "how to use margins attribute folding phenomenon in CSS insider" article can help you solve the problem.

Introduction to Margin

This includes margin-top,margin-right,margin-bottom,margin-left, which controls the distance between block-level elements, which are transparent and invisible.

Collapsingmargins:

The margins folding phenomenon only exists in the 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:

MarginsofID1andID2collapsevertically. 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:normal14px/1.5Verdana,sans-serif; margin-top:30px; margin-bottom:30px; border:1pxsolid#F00;}

Code interpretation:

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

2. * {padding:0;margin:0;}: make the default elements 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 and a font color of # FFF,margin-top/bottom and 10px

4.#ID2 {... }: the font size of the element H2 that makes id ID2 is 14px margin-top/bottom Verdana font, the line height is 150% of the font height, and the normal thickness. The font is 30px, the border is 1px wide, and the red solid line.

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

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

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

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

That is, the margin-top/bottom=10px of ab=cd=30px,ID1 is folded, and the black background of margin that ID1 should have is folded and disappeared.

Why does it collapse:

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 think 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 the Fig.4, so the margin-top/bottom (30px) of the child element ID2 extends beyond the parent element ID1, and there is a blank area between ab and cd in the 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 the first way you came up with was to solve the problem according to the cause of folding-auto. However, in practice, it is impossible for us to know the height of some elements, such as div,h2,p, in advance, so we can not routinely declare the height of elements to solve the folding problem 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:1pxsolid#333; border-bottom:1pxsolid#333;}

By adding the above code, the browser can recalculate the height of the ID1 so that it is the distance between the outertop/bottom of the margin-top/bottom of the child element ID2, that is, the distance of the be in the Fig.3.

This is the end of the introduction to the inside story of "how to fold the margins attribute in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.