Home > Developer > JavaScript
About CSS margin merging and CSS margin Merging
First, it must be clear that only the vertical outer margin of the block boxes in the normal document flow will be merged. The margin between the inside box, floating box, or absolute positioning is not merged.
In the normal Document Stream, there are two cases: between parent and child elements and between adjacent elements.
<!DOCTYPE html>
First, paste the code and reference the image of a leader. between two adjacent elements, set the bottom margin of the first image and the top margin of the second image to 100px and 50px respectively, what are the results?
We can see that there is only PX, which takes the one with a large value and the outer margin is merged.
Now let's change the code to see what happens to the parent and child elements.
1 <style type="text/css"> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 7 #box{ 8 border:2px solid red; 9 width: 400px;10 height: 400px;11 margin-top: 80px;12 }13 14 #img{15 width: 40%;16 display: block;17 margin-top: 100px;18 }19 20 </style>21
This is the key part of the change. Will the outer margin be 100px after the parent and child elements are merged?
Wait, exo me? What about 100px? Why not merge?
It turns out that, in the parent and child elements, only when the parent element has no padding-top and border-top, that is, the margin between the parent and child is exposed to the background, to merge the margins. Now let's take a look at this border.
Well, that's right. In addition, for the absolute location where the file stream is directly detached, the outer margin merging is ineffective.
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
