Margin merge_html/css_WEB-ITnose

Premise　

Only vertically adjacent margins will be merged in normal document flow.

Margins between inline boxes, floating boxes, or absolutely positioned boxes will not be merged.

1. Adjacent elements have multiple margins

1 <ul>2     <li>line 1</li>3     <li>line 2</li>4 </ul>5 <h3 id="This-is-h-line">This is h3 line.</h3>

1 ul{margin-bottom:15px;}2 li{margin-top:10px;margin-bottom:20px;}3 h3{margin-top:28px;}

The bottom margin of ul is 15px, the bottom margin of li is 20px, and the top margin of h3 is 28px. When merging the margins, the maximum value will be taken instead of adding together, so the distance between line 2 and h3 is 28px.

Note: If you add a border to ul, the bottom margin of li will be placed inside ul. At this time, only the merger between ul and h3 will occur.

If both ul and h3 margins are negative, then add the negative margin with the largest absolute value and the largest positive margin to get the spacing.

2. The block element contains a block element (the parent element has no padding or border set)

1 <div id="outer">2     <div id="inner"></div>3 </div>

 1  #outer{ 2    width:200px; 3    height:100px; 4    background:rgb(245,138,158); 5    margin-top:20px; 6 } 7 #inner{ 8    width:50px; 9    height:50px;10    background:rgb(147,172,213);11    margin-top:10px;12 }

The inner does not sink 10px relative to the outer as expected, but remains relatively unchanged relative to the outer position, and the outer sinks 10px overall. At this time, if the upper margin of the outer is set to 20px, whichever is larger will make the overall outer lower by 20px.

If you add a border (or padding) to the parent element to separate the margins of the internal elements, margin merging will not occur:

1 #outer{border:1px solid rgb( 147,172,213);}

Note: If the block element contains inline elements, margin merging will not occur (see horizontal centering and vertical centering).

3. Merge the upper and lower margins of empty elements

1 <div class="blank"></div>2 <div class="focus"></div>3 <div class="blank"></div>

1 .blank{2    width:100px;3    height:50px;4    background:rgb(245,138,158);5 }6 .focus{margin:10px 0 20px 0;}

The spacing of the focus is 20px (whichever is larger). If the blank has margins, it will continue to be merged. The same applies to multiple empty elements.

Reference materials

css margin merging

Detailed explanation of css margin merging