Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to solve the problem of margin collapse in HTML, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this HTML article on how to solve the problem of margin collapse. Let's take a look.

Margin is to set the outer margin of the element. Normally, when setting the margin value, the parent element should be positioned relative to the browser, and the child element should be positioned relative to the parent element. We often encounter no response no matter how to set the value of margin.

Html code

Css code

.box1 {

Width:200px

Height:200px

Background-color:rgb (16128214)

}

.box2 {

Width:100px

Height:100px

Background-color:rgb (128227248)

}

Effect picture

Image12.jpg

Change when setting margin-top value

When setting margin-top:100px for box1, box2 also sets margin-top:100px. Only the parent element is 100px down relative to the browser, while the position of the child element relative to the parent element does not change.

Image15.jpg

But when the margin-top:150px set for the child element is greater than the height of the parent box, the child element will no longer be positioned relative to the parent element, but will move down the 150px relative to the browser positioning with the parent element.

Image14.jpg

From the above, we can know what margin collapse is.

Margin collapse

Margin collapse is when the parent is positioned relative to the browser, but the child is not positioned relative to the parent.

The child is like collapsing relative to the parent.

The margin of the vertical direction of the parent and child nested elements, the parent and child elements are combined together, and the two of them will take the most

Large value

The solution to the collapse of margin

The essence is to trigger the bfc (blockformatcontext block-level formatting context) of the box to change the rendering rules of the parent element.

Method one

Position:absolute

Set relative positioning

Solve the problem of margin collapse by adding a relatively positioned attribute to the parent element

Image17.jpg

Method two

Display:inline-block

Set to row block level element

Image17.jpg

Method three

Float:left and float:right

Use floats to change styles

Image17.jpg

Method 4

Overflow:hidden

Part of the hidden display of the overflow box

This is the end of the article on "how to solve the problem of margin collapse in HTML". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to solve the problem of margin collapse in HTML". If you want to learn more, you are welcome to 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.