Home > Developer > Web Develop
A div that is known to be two wide and high are 100px,margin are 20px in vertical arrangement, as shown in the following:
when setting Css1 margin-bottom:40px, or Css2 margin-top:40px, the behavior is as follows:
Conclusion:
Merging problems can occur only when the vertical margins of the two vertically arranged boxes are together, and this problem does not need to be resolved, and it is OK to remember whose margins are larger.
The horizontally arranged boxes do not have the problem of merging.
The following experiments confirm:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <style>Div{ /*extract two boxes with common characteristics of the code*/width:100px;Height:100px;margin:20px;float: Left; /*left float for box horizontal arrangement*/ } /*set two different colors for each box*/. Div1{background:Pink; }. Div2{background:#CCC; } </style></Head><Body> <Divclass= "Div1">Css1</Div> <Divclass= "Div2">Css2</Div></Body></HTML>
The phenomenon is:
Second case:A wide height of 200px div1 embedded a wide height of 100px div2, when set margin:30px to Div2, the phenomenon is:
At this point outside of the big Div's margin has also become 30px, the following paragraph to solve this problem:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <style>. Div1{width:200px;Height:200px;background:Pink;Overflow:Hidden; /*code to resolve the problem*/
/*BORDER:1PX solid Black The second solution: set a border for the big Div */
}. Div2{width:100px;Height:100px;margin:30px;background:#CCC; } </style></Head><Body> <Divclass= "Div1"> <Divclass= "Div2">Css</Div> </Div></Body></HTML>
need to write in a large div Overflow:hidden, this code can be understood to let the browser display the div when checking if there is a problem, if there is a problem, the browser to solve. The second solution is shown in the code above.
The final phenomenon is:
CSS margin merge or margin collapse problem
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
