In-depth understanding of the margin attribute in css

<p>In-depth understanding of the margin attribute in css</p> <p> I used to think that the margin attribute was a very simple attribute, but recently I encountered some problems while working on a project, and I discovered that there are still some "pits" in the margin attribute. , below I will introduce the basic knowledge of margin and those "pits". This blog post is mainly divided into the following parts: </p> <ul class=" list-paddingleft-2"> <li><p>margin--Basic knowledge</p></li> <li><p>margin--In elements at the same level (non-parent-child Apply </p></li> <li><p>margin between relationships)--Apply between parent elements and child elements (<strong>Key</strong>)</p></li> <li> <p>margin --Several situations when the unit of margin value is %</p> <p> </p> </li> </ul> <h2>Part 1: margin--Basic knowledge</h2> <p> To introduce the basics of margin Knowledge, we cannot avoid talking about the <a href="http://www.php.cn/code/790.html" target="_blank">css box model</a> (Box Model). Generally speaking, the css box model is used for design and layout. It is essentially a box, including: margin, border, padding and the middle content. The picture below is the box model (here we only talk about the standard box model of the W3C specification, not the non-standard box model used in IE5 and IE6 in weird mode): </p> <p> <img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-0.png" alt="" style="max-width:90%" style="max-width:90%"></p> <p> The margin we are going to introduce is on the outermost layer. Because margin (margin) must be transparent, it can be used to leave a certain gap between different boxes to achieve beautiful layout and other effects. From the box model above, we can see that margins exist all around. We can use margin-top, <a href="http://www.php.cn/wiki/934.html" target="_blank">margin-right</a>, <a href="http://www.php.cn/wiki/935.html" target="_blank">margin-bottom</a>, and margin-left to set these respectively. Margin values ​​in four directions. (Note: Since this part of the knowledge is relatively basic, I will not introduce it further in this part) </p> <p> </p> <p> </p> <h2>Part 2: margin--at the same time Application between level elements (non-parent-child relationship) </h2> <p> This part mainly introduces the merging of horizontal and vertical margins. </p> <h2>　(1) Horizontal margin merge</h2> <p>　　 <strong>Two horizontal boxes meet, then the final distance between them is the right margin of the left box and the right box does the sum of the margins. </strong></p> <p>## Example 1: <strong></strong></p> <p> The code is as follows: <strong></strong></p> <p> <strong></strong></p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody><tr class="firstRow">##1<td class="gutter"> <p class="line number1 index0 alt2">2</p> <p class="line number2 index1 alt1">3</p> <p class="line number3 index2 alt2">4</p> <p class="line number4 index3 alt1">5</p> <p class="line number5 index4 alt2">6</p> <p class="line number6 index5 alt1">7</p> <p class="line number7 index6 alt2">8</p> <p class="line number8 index7 alt1">9</p> <p class="line number9 index8 alt2">10</p> <p class="line number10 index9 alt1">11</p> <p class="line number11 index10 alt2">12</p> <p class="line number12 index11 alt1">13</p> <p class="line number13 index12 alt2">14</p> <p class="line number14 index13 alt1">15</p> <p class="line number15 index14 alt2">16</p> <p class="line number16 index15 alt1">17</p> <p class="line number17 index16 alt2"> 18</p> <p class="line number18 index17 alt1">19</p> <p class="line number19 index18 alt2">20</p> <p class="line number20 index19 alt1">#21</p> <p class="line number21 index20 alt2">22</p> <p class="line number22 index21 alt1">23</p> <p class="line number23 index22 alt2">24</p> <p class="line number24 index23 alt1">25 </p> <p class="line number25 index24 alt2">26</p> <p class="line number26 index25 alt1">27</p> <p class="line number27 index26 alt2">28</p> <p class="line number28 index27 alt1">29</p> <p class="line number29 index28 alt2">30</p> <p class="line number30 index29 alt1">31</p> <p class="line number31 index30 alt2">32</p> <p class="line number32 index31 alt1">33</p> <p class="line number33 index32 alt2">34</p> <p class="line number34 index33 alt1">35</p> <p class="line number35 index34 alt2">36</p> <p class="line number36 index35 alt1">37</p> <p class="line number37 index36 alt2"></p> </td> <td class="code"> <p class="container"><br></p><!<p class="line number1 index0 alt2"><code class="html plain">DOCTYPE</code> <code class="html keyword">html><code class="html plain"></code>##<</p><p class="line number2 index1 alt1">html<code class="html plain"> </code>lang="en"><code class="html keyword"></code><code class="html plain"></code><</p><p class="line number3 index2 alt2">head<code class="html plain"></code>><code class="html keyword"></code><p class="line number4 index3 alt1"><code class="html spaces"> ​ </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p> <p class="line number5 index4 alt2">## ​ <code class="html spaces"></code><<code class="html plain"></code>title<code class="html keyword"></code>>Two horizontal boxes</<code class="html plain"></code>title<code class="html keyword"></code>><code class="html plain"></code></p> <p class="line number6 index5 alt1">                                                                                                                                <code class="html spaces"></code><code class="html plain"></code>                                                                                                                                                                                                                                          <code class="html keyword"></code>margin:0; <code class="html plain"></code>                                                                                                                                                                   </p>body{<p class="line number7 index6 alt2"><code class="html spaces"></code><code class="html plain">                                                                                                                              </code></p> <p class="line number8 index7 alt1">#                                                                                                                         <code class="html spaces">         </code><code class="html plain">height: 100px; </code></p> <p class="line number9 index8 alt2"><code class="html spaces">                                                                                                                         </code>display: inline-block;<code class="html plain"></code></p> <p class="line number10 index9 alt1">                                                                                         #font-size: 20px; <code class="html spaces"></code><code class="html plain">                                                                                                                                                                          </code>           </p> <p class="line number11 index10 alt2">background: yellow;<code class="html spaces"></code><code class="html plain">##                                                                                                                                                    </code>##margin-left: 50px;</p> <p class="line number12 index11 alt1"></p> <p class="line number29 index28 alt2"><code class="html spaces">                                                                                                              </code><code class="html plain"></</code></p>style<p class="line number30 index29 alt1"><code class="html spaces">></code><code class="html plain"></code>##</</p><p class="line number31 index30 alt2">head<code class="html spaces"></code>><code class="html plain"></code><code class="html keyword"></code><<code class="html plain"></code>body</p><p class="line number32 index31 alt1">><code class="html plain"></code><code class="html keyword">##​ </code><code class="html plain"> <</code></p>p<p class="line number33 index32 alt2"> <code class="html plain">class="left">Width is 100px, right margin is 50px</</code><code class="html keyword">p</code><code class="html plain">></code> </p> <p class="line number34 index33 alt1"><code class="html spaces">​ </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="right">Width is 100px, left margin is 50px</</code> <code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number35 index34 alt2">##</<code class="html spaces"></code>body<code class="html plain"></code>><code class="html keyword"></code><code class="html plain"></code></<code class="html keyword"></code>html<code class="html plain"></code>></p> <p class="line number36 index35 alt1"><code class="html plain"></code><code class="html keyword">##<p> The effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-1.png" alt=""></p> <p>The distance between the two is exactly 100px at this time. </p> <p> Supplementary explanation: As you can see, in order to make the two p (block elements) out of the normal document flow, I used the display:inline-block; attribute. <strong> In addition, I also changed the body Set font-size to 0, which can solve the problem of inline-block itself (</strong>If you are not clear about the description here, you can read my blog post "Understanding and Applying the Display Attribute in CSS", this article introduces inline-block Existing problems <strong>), </strong> Otherwise, the two p examples will be larger than 100px. Of course, you can also use float to make two p appear on the same line. </p> <p> </p> <h2>　(2) Vertical margin merging</h2> <p>　<strong>When two vertical boxes meet, their vertical distance is equal to the upper box The larger of the bottom margin of the box below and the top margin of the box below. </strong></p> <p><strong> Example 2: </strong></p> <p><strong> 　</strong></p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> <p class="line number1 index0 alt2">1</p> <p class="line number2 index1 alt1">2</p> <p class="line number3 index2 alt2">3</p> <p class="line number4 index3 alt1">4</p> <p class="line number5 index4 alt2">5</p> <p class="line number6 index5 alt1">6</p> <p class="line number7 index6 alt2">7</p> <p class="line number8 index7 alt1">8</p> <p class="line number9 index8 alt2">9</p> <p class="line number10 index9 alt1">10</p> <p class="line number11 index10 alt2">11</p> <p class="line number12 index11 alt1">12</p> <p class="line number13 index12 alt2"> 13</p> <p class="line number14 index13 alt1">14</p> <p class="line number15 index14 alt2">15</p> <p class="line number16 index15 alt1">16</p> <p class="line number17 index16 alt2">17</p> <p class="line number18 index17 alt1">18</p> <p class="line number19 index18 alt2">19</p> <p class="line number20 index19 alt1">20 </p> <p class="line number21 index20 alt2">21</p> <p class="line number22 index21 alt1">22</p> <p class="line number23 index22 alt2">23</p> <p class="line number24 index23 alt1">24</p> <p class="line number25 index24 alt2">25</p> <p class="line number26 index25 alt1">26</p> <p class="line number27 index26 alt2">27</p> <p class="line number28 index27 alt1">28</p> <p class="line number29 index28 alt2">29</p> <p class="line number30 index29 alt1">30</p> </td> <td class="code"> <p class="container"><br></p> <p class="line number1 index0 alt2">##<!<code class="html plain"> </code>DOCTYPE<code class="html keyword"> </code>html><code class="html plain"></code></p>##<<p class="line number2 index1 alt1"><code class="html plain">html</code> <code class="html keyword">lang="en"><code class="html plain"></code><<p class="line number3 index2 alt2"><code class="html plain">head</code><code class="html keyword">><code class="html plain"></code>##​​ <p class="line number4 index3 alt1"><<code class="html spaces"></code>meta<code class="html plain"> </code>charset="UTF-8"><code class="html keyword"></code><code class="html plain"></code> </p> <p class="line number5 index4 alt2"><<code class="html spaces"></code>title<code class="html plain"></code> >Two boxes in the horizontal direction</<code class="html keyword"></code>title<code class="html plain"></code>><code class="html keyword"></code><code class="html plain"></code>​ </p> <p class="line number6 index5 alt1"><<code class="html spaces"></code>style<code class="html plain"></code>><code class="html keyword"></code><code class="html plain">##                                                                           :0;</code></p> <p class="line number7 index6 alt2">##                                                                                      <code class="html spaces"></code><code class="html plain">               </code></p>}<p class="line number8 index7 alt1"><code class="html spaces"></code>##                                                                                                                          </p> <p class="line number13 index12 alt2"><code class="html spaces">                                                                                                                                            </code><code class="html plain">margin-bottom: 100px;</code></p> <p class="line number14 index13 alt1">##                                        ##}<code class="html spaces"></code><code class="html plain">##                                                                                                                                                                                                                   </code></p>##                                                                                                                                                         <p class="line number15 index14 alt2">#                                                                                                                                           #</<code class="html spaces"></code>style<code class="html plain"></code>></p> <p class="line number16 index15 alt1"><code class="html spaces">##</</code><code class="html plain">head</code></p>><p class="line number17 index16 alt2"><code class="html spaces"></code><code class="html plain"><</code></p>body<p class="line number18 index17 alt1"><code class="html spaces">></code><code class="html plain"></code></p>​ <p class="line number19 index18 alt2"><code class="html spaces"><</code><code class="html plain">p</code> </p>class="top">The height is 100px, the bottom margin is 100px</<p class="line number20 index19 alt1"><code class="html spaces">p</code><code class="html plain">></code></p> <p class="line number21 index20 alt2"><code class="html spaces">     </code><code class="html plain"><</code></p>p<p class="line number22 index21 alt1"> <code class="html spaces">class="bottom">The height is 100px, the top margin is 50px</</code><code class="html plain">p </code></p>><p class="line number23 index22 alt2"><code class="html spaces"></code>##</<code class="html plain"></code>body</p><p class="line number24 index23 alt1">><code class="html spaces"></code><code class="html plain"></code> </<code class="html keyword"></code>html<code class="html plain"></code>></p> <p class="line number25 index24 alt2"><code class="html plain"></code><code class="html keyword"></code></p> <p> The effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-2.png" alt=""></p> <p> At this time, we can observe it with the naked eye. The vertical direction of the two examples is about 100px (actually 100px) instead of 100+50 =150px; This is precisely because when <strong> two vertical boxes meet, the vertical distance is equal to the larger of the lower margin of the upper box and the upper margin of the lower box. </strong></p> <p><strong>　</strong></p> <p><strong> Another interesting example is: Suppose there is an element with margin-top and margin-bottom set at the same time, but the content is empty , then the two margin values ​​will also be superimposed, and the value will be the largest of the two. It is similar to the superposition of the margin values ​​of two boxes in the vertical direction. The code is as follows: </strong></p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody><tr class="firstRow"> <td class="gutter">##1<p class="line number1 index0 alt2"></p>2 <p class="line number2 index1 alt1"></p>3<p class="line number3 index2 alt2"></p>4<p class="line number4 index3 alt1"></p>5<p class="line number5 index4 alt2"></p>6<p class="line number6 index5 alt1"></p>7<p class="line number7 index6 alt2"></p>8<p class="line number8 index7 alt1"></p>9<p class="line number9 index8 alt2"></p>10<p class="line number10 index9 alt1"></p>11<p class="line number11 index10 alt2"></p>12<p class="line number12 index11 alt1"></p>13<p class="line number13 index12 alt2"></p>14<p class="line number14 index13 alt1"></p>15<p class="line number15 index14 alt2"></p>16<p class="line number16 index15 alt1"></p>17<p class="line number17 index16 alt2"></p>18<p class="line number18 index17 alt1"></p>19<p class="line number19 index18 alt2"></p>20<p class="line number20 index19 alt1"></p>21<p class="line number21 index20 alt2"></p>22<p class="line number22 index21 alt1"></p>23<p class="line number23 index22 alt2"> </p>24<p class="line number24 index23 alt1"></p>25<p class="line number25 index24 alt2"></p>26<p class="line number26 index25 alt1"></p>27<p class="line number27 index26 alt2"></p>28<p class="line number28 index27 alt1"></p>29<p class="line number29 index28 alt2"></p>30<p class="line number30 index29 alt1"></p>31<p class="line number31 index30 alt2"></p>32<p class="line number32 index31 alt1"></p>33<p class="line number33 index32 alt2"></p>34<p class="line number34 index33 alt1"></p> </td> <td class="code"> <p class="container"><br></p>#< !<p class="line number1 index0 alt2"><code class="html plain">DOCTYPE</code> <code class="html keyword">html><code class="html plain"></code><<p class="line number2 index1 alt1"><code class="html plain">html</code> <code class="html keyword">lang="en"> <code class="html plain"></code><<p class="line number3 index2 alt2"><code class="html plain">head</code><code class="html keyword">><code class="html plain"></code>##​ <p class="line number4 index3 alt1"><<code class="html spaces"></code>meta<code class="html plain"> </code>charset="UTF-8"><code class="html keyword"></code><code class="html plain"></code></p>##<<p class="line number5 index4 alt2"><code class="html spaces">title</code><code class="html plain">>Two boxes in the horizontal direction</</code><code class="html keyword">title</code><code class="html plain">><code class="html keyword"></code>##​ <code class="html plain"></code>< </p><p class="line number6 index5 alt1">style<code class="html spaces"></code>><code class="html plain"></code><code class="html keyword">##                                                                                                </code>margin:0;<code class="html plain"></code>##                                                                                                          <p class="line number7 index6 alt2"><code class="html spaces"></code><code class="html plain"></code>#           </p> <p class="line number8 index7 alt1">.top{<code class="html spaces"></code><code class="html plain">##                                                                                             </code></p> <p class="line number14 index13 alt1"><code class="html spaces">            </code><code class="html plain">height: 100px;</code></p> <p class="line number15 index14 alt2"><code class="html spaces">            </code><code class="html plain">background: red;</code></p> <p class="line number16 index15 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number17 index16 alt2"><code class="html spaces">        </code><code class="html plain">.middle{</code></p> <p class="line number18 index17 alt1"><code class="html spaces">            </code><code class="html plain">margin-top: 100px;</code></p> <p class="line number19 index18 alt2"><code class="html spaces">            </code><code class="html plain">margin-bottom:50px;</code></p> <p class="line number20 index19 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number21 index20 alt2"><code class="html spaces">        </code><code class="html plain">.footer{</code></p> <p class="line number22 index21 alt1"><code class="html spaces">            </code><code class="html plain">width: 500px;</code></p> <p class="line number23 index22 alt2"><code class="html spaces">            </code><code class="html plain">height: 100px;</code></p> <p class="line number24 index23 alt1"><code class="html spaces">            </code><code class="html plain">background: green;</code></p> <p class="line number25 index24 alt2"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number26 index25 alt1"> </p> <p class="line number27 index26 alt2"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number28 index27 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number29 index28 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number30 index29 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="top">上面的p,高100px</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number31 index30 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="middle"></</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number32 index31 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="footer">下面的p，高100px</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number33 index32 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number34 index33 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p> </td> </tr></tbody></table> <p> The final effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-3.png" alt=""></p> <p> We found that the example between the p above and the p below is not 100+50=150px, but The largest of the two, which is 100px. </p> <p><strong>　</strong></p> <p> So why does W3C set such a standard and not set the same standard as the horizontal direction? That is, the superposition of margin values. In fact, this also makes sense. For example, we need to design a page consisting of several paragraphs. We need to set margin-top and margin-bottom so that there is a distance between the first paragraph and the top of the page, and a distance between the last paragraph and the bottom. The following is the rendering without overlay and overlay: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-4.png" alt=""></p> <p>We can see that the page on the left does not overlap, so the example between the two paragraphs is double the spacing at the top , and the page on the right overlaps, all spacing is equal. Maybe this is the purpose of setting standards like this, who knows? </p> <p> </p> <p> </p> <h2>The third part: margin--applied between parent elements and child elements (<strong>Key points</strong>)</h2> <p>Second The part introduces the use of margin between sibling elements, and this part will introduce the most interesting application of margin between parent elements and child elements. In this part, we also discuss it from two aspects. On the one hand, the child elements set the margin value in the horizontal direction, and on the other hand, the child elements set the margin value in the vertical direction. </p> <h3>　(1) Set the horizontal margin value in the child element</h3> <p> We can set margin-left to control the relationship between the left border of the child element and the left border of the parent element. </p> <p> Example 3: </p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody><tr class="firstRow"> <td class="gutter">##1<p class="line number1 index0 alt2"></p>2<p class="line number2 index1 alt1"></p>3<p class="line number3 index2 alt2"></p>4<p class="line number4 index3 alt1"></p>5<p class="line number5 index4 alt2"></p>6<p class="line number6 index5 alt1"></p>7<p class="line number7 index6 alt2"></p>8<p class="line number8 index7 alt1"></p>9<p class="line number9 index8 alt2"></p>10<p class="line number10 index9 alt1"></p>11<p class="line number11 index10 alt2"></p>12<p class="line number12 index11 alt1"></p>13<p class="line number13 index12 alt2"></p>14<p class="line number14 index13 alt1"></p>15<p class="line number15 index14 alt2"></p> 16<p class="line number16 index15 alt1"></p>17<p class="line number17 index16 alt2"></p>18<p class="line number18 index17 alt1"></p>19<p class="line number19 index18 alt2"></p>20<p class="line number20 index19 alt1"></p>21<p class="line number21 index20 alt2"></p>22<p class="line number22 index21 alt1"></p>23 <p class="line number23 index22 alt2"></p>24<p class="line number24 index23 alt1"></p>25<p class="line number25 index24 alt2"></p>26<p class="line number26 index25 alt1"></p> </td> <td class="code"> <p class="container"><br></p>##<!<p class="line number1 index0 alt2"><code class="html plain">DOCTYPE</code> <code class="html keyword">html><code class="html plain"></code><<p class="line number2 index1 alt1"><code class="html plain">html</code> <code class="html keyword">lang="en"> <code class="html plain"></code><<p class="line number3 index2 alt2"><code class="html plain">head</code><code class="html keyword">><code class="html plain"></code>​ <p class="line number4 index3 alt1"><code class="html spaces"><</code><code class="html plain">meta</code> <code class="html keyword">charset="UTF-8"></code><code class="html plain"></code></p> <p class="line number5 index4 alt2"><code class="html spaces"><</code><code class="html plain">title</code><code class="html keyword">>margin</</code><code class="html plain">title</code><code class="html keyword">></code><code class="html plain"></code>##​ </p> <p class="line number6 index5 alt1"><<code class="html spaces"></code>style<code class="html plain"></code>><code class="html keyword"></code><code class="html plain">##           </code></p>*{padding:0; margin:0; border:0;}<p class="line number7 index6 alt2"><code class="html spaces"></code><code class="html plain">       </code></p>.father{<p class="line number8 index7 alt1"><code class="html spaces"></code><code class="html plain">                                                              <p class="line number10 index9 alt1"><code class="html spaces">            </code><code class="html plain">height: 500px;</code></p> <p class="line number11 index10 alt2"><code class="html spaces">            </code><code class="html plain">background: red;</code></p> <p class="line number12 index11 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number13 index12 alt2"><code class="html spaces">        </code><code class="html plain">.son{</code></p> <p class="line number14 index13 alt1"><code class="html spaces">            </code><code class="html plain">width: 100px;</code></p> <p class="line number15 index14 alt2"><code class="html spaces">            </code><code class="html plain">height: 100px;</code></p> <p class="line number16 index15 alt1"><code class="html spaces">            </code><code class="html plain">background: green;</code></p> <p class="line number17 index16 alt2"><code class="html spaces">            </code><code class="html plain">margin-left: 100px;</code></p> <p class="line number18 index17 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number19 index18 alt2"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number21 index20 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number22 index21 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p> <p class="line number23 index22 alt2"><code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-left为100px。</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number24 index23 alt1"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p></code></p> </td> </tr></tbody></table> <p> I set the margin-left of the child element to 100px; the effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-5.png" alt="" style="max-width:90%" style="max-width:90%"></p> <p>That is, the distance between the left border of the child element and the left border of the parent element is 100px. <strong>It is different from setting margin between elements of the same level, because the margin between elements of the same level does not take padding into account, but it is different between the parent element and the child element. So if there is padding in the parent element, the effect will be What kind? </strong>Please look at the following example: </p> <p> Example 4: </p> <p> Next we add padding value to the parent element based on the above example. </p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody><tr class="firstRow"> <td class="gutter">##1<p class="line number1 index0 alt2"></p>2<p class="line number2 index1 alt1"></p> 3<p class="line number3 index2 alt2"></p>4<p class="line number4 index3 alt1"></p>5<p class="line number5 index4 alt2"></p>6<p class="line number6 index5 alt1"></p>7<p class="line number7 index6 alt2"></p>8<p class="line number8 index7 alt1"></p>9<p class="line number9 index8 alt2"></p>10 <p class="line number10 index9 alt1"></p>11<p class="line number11 index10 alt2"></p>12<p class="line number12 index11 alt1"></p>13<p class="line number13 index12 alt2"></p>14<p class="line number14 index13 alt1"></p>15<p class="line number15 index14 alt2"></p>16<p class="line number16 index15 alt1"></p>17<p class="line number17 index16 alt2"></p>18<p class="line number18 index17 alt1"></p>19<p class="line number19 index18 alt2"></p>20<p class="line number20 index19 alt1"></p>21<p class="line number21 index20 alt2"></p>22<p class="line number22 index21 alt1"></p>23<p class="line number23 index22 alt2"></p>24<p class="line number24 index23 alt1"></p>25<p class="line number25 index24 alt2"></p>26<p class="line number26 index25 alt1"></p>27<p class="line number27 index26 alt2"></p> </td> <td class="code"> <p class="container"><br></p>##<!<p class="line number1 index0 alt2"><code class="html plain">DOCTYPE</code> <code class="html keyword">html><code class="html plain"></code><<p class="line number2 index1 alt1"><code class="html plain">html</code> <code class="html keyword">lang="en"><code class="html plain"></code><<p class="line number3 index2 alt2"><code class="html plain">head</code><code class="html keyword">><code class="html plain"></code>##​ <p class="line number4 index3 alt1"><<code class="html spaces"></code> meta<code class="html plain"> </code>charset="UTF-8"><code class="html keyword"></code><code class="html plain"></code> </p> <p class="line number5 index4 alt2"><<code class="html spaces"></code>title<code class="html plain"></code>> ;margin</<code class="html keyword"></code>title<code class="html plain"></code>><code class="html keyword"></code><code class="html plain">##      </code></p><<p class="line number6 index5 alt1"><code class="html spaces">style</code><code class="html plain">><code class="html keyword"></code><code class="html plain">                                                                    </code>##.father{<p class="line number7 index6 alt2"><code class="html spaces">##                                                                                                                                   500px; </code><code class="html plain">##                                                                                                             </code>#width: 100px;</p> <p class="line number8 index7 alt1"></p> <p class="line number16 index15 alt1"><code class="html spaces">            </code><code class="html plain">height: 100px;</code></p> <p class="line number17 index16 alt2"><code class="html spaces">            </code><code class="html plain">background: green;</code></p> <p class="line number18 index17 alt1"><code class="html spaces">            </code><code class="html plain">margin-left: 100px;</code></p> <p class="line number19 index18 alt2"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number20 index19 alt1"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number22 index21 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number23 index22 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p> <p class="line number24 index23 alt1"><code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-left为100px。</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number25 index24 alt2"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number27 index26 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p> </td> </tr></tbody></table> <p> The above code adds a padding value of 100px to the parent element. The effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-6.png" alt="" style="max-width:90%" style="max-width:90%"></p> <p>We can see that the distance above the child element is 100px, because the child element It must be in the content part of the parent element, there is no doubt about it. </p> <p><strong>But after measurement, it can be found that the distance between the left border of the child element and the left border of the parent element is 200px</strong>, because there is also a left padding value of 100px. In the previous example, because I The padding value is not set, so it is not observed. <strong>So this means setting margin-left in the child element. Its value is actually the distance between the left border of the child element and the inside of the left padding of the parent element. </strong></p> <p> </p> <p> Example 5: The use of margin-right is similar to the use of margin-left. I will only give one example here. </p> <p> This example sets the margin-right value in the child element as follows: </p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody> <tr class="firstRow"> <td class="gutter"> <p class="line number1 index0 alt2">1</p> <p class="line number2 index1 alt1">2</p> <p class="line number3 index2 alt2">3</p> <p class="line number4 index3 alt1">4</p> <p class="line number5 index4 alt2">5</p> <p class="line number6 index5 alt1">6</p> <p class="line number7 index6 alt2">7</p> <p class="line number8 index7 alt1">8</p> <p class="line number9 index8 alt2">9</p> <p class="line number10 index9 alt1">10</p> <p class="line number11 index10 alt2">11</p> <p class="line number12 index11 alt1">12</p> <p class="line number13 index12 alt2">13</p> <p class="line number14 index13 alt1"> 14</p> <p class="line number15 index14 alt2">15</p> <p class="line number16 index15 alt1">16</p> <p class="line number17 index16 alt2">17</p> <p class="line number18 index17 alt1">18</p> <p class="line number19 index18 alt2">19</p> <p class="line number20 index19 alt1">20</p> <p class="line number21 index20 alt2">21 </p> <p class="line number22 index21 alt1">22</p> <p class="line number23 index22 alt2">23</p> <p class="line number24 index23 alt1">24</p> <p class="line number25 index24 alt2">25</p> <p class="line number26 index25 alt1">26</p> <p class="line number27 index26 alt2">27</p> <p class="line number28 index27 alt1">28</p> </td> <td class="code"> <p class="container"><br></p> <p class="line number1 index0 alt2">##<!<code class="html plain"></code>DOCTYPE<code class="html keyword"> </code>html><code class="html plain"></code></p> <p class="line number2 index1 alt1"><<code class="html plain"></code>html<code class="html keyword"> </code>lang="en"><code class="html plain"></code></p> <p class="line number3 index2 alt2"><<code class="html plain"></code>head<code class="html keyword"></code>><code class="html plain"></code></p> <p class="line number4 index3 alt1">​ <code class="html spaces"></code><<code class="html plain"></code>meta<code class="html keyword"> </code>charset="UTF-8"><code class="html plain"></code></p> <p class="line number5 index4 alt2">     <code class="html spaces"></code><<code class="html plain"></code>title<code class="html keyword"></code>>margin</<code class="html plain"></code>title<code class="html keyword"></code>><code class="html plain"></code></p> <p class="line number6 index5 alt1">                                                                                                              ##*{padding:0; margin:0; border:0;}<code class="html spaces"></code><code class="html plain">##            </code><code class="html keyword">.father{</code><code class="html plain"></code></p> <p class="line number7 index6 alt2"><code class="html spaces">width: 500px;</code><code class="html plain"></code>##                   </p> <p class="line number8 index7 alt1">height: 500px;                   <code class="html spaces"></code> padding:100px;<code class="html plain"></code></p>##                                                          <p class="line number9 index8 alt2"><code class="html spaces">background: red; #<p class="line number14 index13 alt1"><code class="html spaces">        </code><code class="html plain">.son{</code></p> <p class="line number15 index14 alt2"><code class="html spaces">            </code><code class="html plain">float: right;</code></p> <p class="line number16 index15 alt1"><code class="html spaces">            </code><code class="html plain">width: 100px;</code></p> <p class="line number17 index16 alt2"><code class="html spaces">            </code><code class="html plain">height: 100px;</code></p> <p class="line number18 index17 alt1"><code class="html spaces">            </code><code class="html plain">background: green;</code></p> <p class="line number19 index18 alt2"><code class="html spaces">            </code><code class="html plain">margin-right: 100px;</code></p> <p class="line number20 index19 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number21 index20 alt2"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number22 index21 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number23 index22 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number24 index23 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p> <p class="line number25 index24 alt2"><code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">宽度为100px，margin-right为100px。</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number26 index25 alt1"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number27 index26 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number28 index27 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p></code></p> </td> </tr> </tbody></table> <p> The difference between this example and Example 4 is only the position of the child elements. The effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-7.png" alt="" style="max-width:90%" style="max-width:90%"></p> <p>This example can illustrate that the value of margin-right is the distance <strong> between the right border of the child element and the inside of the right padding of the parent element. It's just that I didn't use padding in the previous examples, so I couldn't observe it. </strong></p> <p></p> <p></p> <p></p>　(2) Set the vertical margin value in the child element<h3></h3>　According to the previous experience, theory Speaking from the top, we can also set the value of margin-top so that <p> there is a certain distance between the top border of the child element and the inside <strong> of the top padding of the parent element. So let’s try it! </strong></p> Example 6: <p></p> <p></p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody><tr class="firstRow"># #1<td class="gutter"> <p class="line number1 index0 alt2">2</p> <p class="line number2 index1 alt1">3</p> <p class="line number3 index2 alt2">4</p> <p class="line number4 index3 alt1">5</p> <p class="line number5 index4 alt2">6</p> <p class="line number6 index5 alt1">7</p> <p class="line number7 index6 alt2"> 8</p> <p class="line number8 index7 alt1">9</p> <p class="line number9 index8 alt2">10</p> <p class="line number10 index9 alt1">11</p> <p class="line number11 index10 alt2">12</p> <p class="line number12 index11 alt1">13</p> <p class="line number13 index12 alt2">14</p> <p class="line number14 index13 alt1">15 </p> <p class="line number15 index14 alt2">16</p> <p class="line number16 index15 alt1">17</p> <p class="line number17 index16 alt2">18</p> <p class="line number18 index17 alt1">19</p> <p class="line number19 index18 alt2">20</p> <p class="line number20 index19 alt1">21</p> <p class="line number21 index20 alt2">22</p> <p class="line number22 index21 alt1">23</p> <p class="line number23 index22 alt2">24</p> <p class="line number24 index23 alt1">25</p> <p class="line number25 index24 alt2">26</p> <p class="line number26 index25 alt1"></p> </td> <td class="code"> <p class="container"><br># #<!</p><p class="line number1 index0 alt2">DOCTYPE<code class="html plain"> </code>html><code class="html keyword"></code><code class="html plain">##<</code></p>html<p class="line number2 index1 alt1"> <code class="html plain">lang="en "></code><code class="html keyword"></code><code class="html plain"><</code></p>head<p class="line number3 index2 alt2"><code class="html plain">></code><code class="html keyword"></code>##​​ <code class="html plain"></code> <</p><p class="line number4 index3 alt1">meta<code class="html spaces"> </code>charset="UTF-8"><code class="html plain"></code><code class="html keyword"></code>     <code class="html plain"></code><</p><p class="line number5 index4 alt2"> title<code class="html spaces"></code>>margin</<code class="html plain"></code>title<code class="html keyword"></code>><code class="html plain"></code><code class="html keyword">##​ </code><code class="html plain"><</code> </p>style<p class="line number6 index5 alt1"><code class="html spaces">></code><code class="html plain"></code>##                                    <code class="html keyword"></code>#          <code class="html plain"></code>.father{</p> <p class="line number7 index6 alt2"><code class="html spaces"></code>                                                                            <code class="html plain"></code>height: 500px;</p> <p class="line number8 index7 alt1"><code class="html spaces">##                                                                                      )<p class="line number15 index14 alt2"><code class="html spaces">            </code><code class="html plain">height: 100px;</code></p> <p class="line number16 index15 alt1"><code class="html spaces">            </code><code class="html plain">background: green;</code></p> <p class="line number17 index16 alt2"><code class="html spaces">            </code><code class="html plain">margin-top: 100px;</code></p> <p class="line number18 index17 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number19 index18 alt2"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number20 index19 alt1"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number21 index20 alt2"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number22 index21 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p> <p class="line number23 index22 alt2"><code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son">高度为100px，margin-top为100px。</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number24 index23 alt1"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p></code></p> </td> </tr></tbody></table> <p> In this example, I set the margin-top to 100px, and the effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-8.png" alt="" style="max-width:90%" style="max-width:90%"></p> <p><strong>This is not the effect we want, we want the child elements to be The upper part is 100px away from the upper part of the parent element, but what we see is that the upper part of the parent element is 100px away from the upper part of the browser page. Why is this? What went wrong? </strong></p> <p><strong>　</strong></p> <p><strong> Actually this is because when the parent element does not set the padding value and border value, a bug occurs--the parent element The top and the top of the child element completely overlap and cannot be separated. That's why the above-mentioned parent element and child element move downward at the same time. </strong></p> <p><strong> There are several solutions to this problem: </strong></p> <ul class=" list-paddingleft-2"> <li><p><strong>Method 1: Add ## to the parent element #padding-top<a href="http://www.php.cn/wiki/949.html" target="_blank">Value</a></strong></p></li> <li><p>Method 2: Add border value to the parent element<strong></strong></p></li> <li> <p>Method 3: Add the attribute overflow:hidden to the parent element;<strong></strong></p> </li> <li><p>Method 4: Declare float to the parent element or child element<strong></strong></p></li> <li><p>Method 5: Make the parent element or child element declared as <strong>Absolute positioning<a href="http://www.php.cn/code/6074.html" target="_blank">: position:absolute;</a></strong></p></li> <li>##Method 6: Add attributes to the parent element<p> overflow:auto; positon:relative; (Note: This method will be added later, thank you blogger @小elvesPawn for providing this method) <strong></strong> </p> </li> </ul>Method 1: Based on Example 6, add padding-top:1px in the css code of the parent element; the effect is as follows: <p><strong></strong></p> <p><strong><img src="https://img.php.cn/upload/article/000/000/007/b14182e42c329966dffd9ff54c3928c5-9.png" alt="" style="max-width:90%" style="max-width:90%"></strong> </p> <p></p>The only disadvantage of the method is that it increases the error by 1px. <p><strong></strong></p>　<p><strong></strong></p>Method 2: Based on Example 6, add border-top:1px solid transparent in the css code of the parent element; the effect is as follows: <p><strong></strong></p> <p><strong><img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-10.png" alt="" style="max-width:90%" style="max-width:90%"></strong> </p> <p></p> also achieves the same effect, but has the same shortcomings as method one. <p><strong></strong></p>　<p><strong></strong></p>Method 3: Based on Example 6, add overflow:hidden; in the css code of the parent element; the effect is as follows:<p><strong></strong></p> <p><strong><strong><img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-11.png" alt="" style="max-width:90%" style="max-width:90%"></strong></strong> </p> <p></p> also achieved the effect without any error. It’s perfect!!!!<p><strong></strong></p>　<p><strong></strong></p>Method 4: Declare float to the parent element or child element; based on Example 6, in the child element Add float:left; to the css code or add float:left; to the parent element css code to achieve the effect. The same picture is no longer displayed here. <p><strong></strong></p> Advantages: No pixel error. Disadvantages: float is sometimes unnecessary. <p><strong></strong> </p> <p></p> Method 5: Add the position:absolute; attribute to the parent element or child element. The same effect is achieved. <p><strong></strong></p> Advantages: Same as method four. And as long as we don't use top and left, there will be no impact, so this is also a good method. <p><strong></strong> (Note: Blogger @laden666666 pointed out that the above methods three, four, and five are actually methods to remove the margin of child elements from penetrating the parent container. They can be classified as bfc methods and are essentially the same. Thank you here) </p> <p> </p>Method 6: Add overflow:auto; and position:relative; to the parent element to achieve the same effect. <p><strong></strong></p> This method has been personally tested and is effective. It is provided by blogger @小elvesPawn. I would like to express my gratitude. <p><strong></strong> </p> <p> </p> <p>Part 4: Several situations when the unit of margin value is %</p> <h2> I used margin when giving examples before. Its values ​​are all in px, so there is no problem in understanding this. </h2>But what if the margin value is in %? In fact, the percentage (%) at this time is relative to the parent element (container) of the element, and this is true for both sibling elements and parent-child elements. (<p>Thanks again to blogger @小elvesPawn for the suggestions!! Based on this suggestion, this part of the content will be supplemented) However, when using vertical margins in elements of the same level, unexpected results will occur. Here is an example. <strong></strong>　(1) Elements of the same level use a margin of % in the horizontal direction</p> <h3> Example 7: </h3> <p> </p> <p></p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody><tr class="firstRow">1<td class="gutter"> <p class="line number1 index0 alt2">2</p> <p class="line number2 index1 alt1">3</p> <p class="line number4 index3 alt1">4</p> <p class="line number5 index4 alt2">5</p> <p class="line number6 index5 alt1">6</p> <p class="line number7 index6 alt2">7</p> <p class="line number8 index7 alt1">8</p> <p class="line number9 index8 alt2">9</p> <p class="line number10 index9 alt1">10</p> <p class="line number11 index10 alt2">11</p> <p class="line number12 index11 alt1">12</p> <p class="line number13 index12 alt2">13</p> <p class="line number14 index13 alt1">14</p> <p class="line number15 index14 alt2">15</p> <p class="line number16 index15 alt1">16</p> <p class="line number17 index16 alt2">17</p> <p class="line number18 index17 alt1">18</p> <p class="line number19 index18 alt2">19</p> <p class="line number20 index19 alt1">20</p> <p class="line number21 index20 alt2">21</p> <p class="line number22 index21 alt1">22</p> <p class="line number23 index22 alt2">23</p> <p class="line number24 index23 alt1">24</p> <p class="line number25 index24 alt2">25</p> <p class="line number26 index25 alt1">26</p> <p class="line number27 index26 alt2">27</p> <p class="line number28 index27 alt1">28</p> </td> <td class="code"> <p class="container"><br></p> <p class="line number1 index0 alt2"><code class="html plain"><</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number2 index1 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">meta</code> <code class="html plain">charset="UTF-8"></code></p> <p class="line number3 index2 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">title</code><code class="html plain">>margin</</code><code class="html keyword">title</code><code class="html plain">></code></p> <p class="line number4 index3 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number5 index4 alt2"><code class="html spaces">        </code><code class="html plain">*{</code></p> <p class="line number6 index5 alt1"><code class="html spaces">            </code><code class="html plain">margin:0;</code></p> <p class="line number7 index6 alt2"><code class="html spaces">            </code><code class="html plain">padding:0;</code></p> <p class="line number8 index7 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number9 index8 alt2"><code class="html spaces">        </code><code class="html plain">.first{</code></p> <p class="line number10 index9 alt1"><code class="html spaces">            </code><code class="html plain">float: left;</code></p> <p class="line number11 index10 alt2"><code class="html spaces">            </code><code class="html plain">width: 200px;</code></p> <p class="line number12 index11 alt1"><code class="html spaces">            </code><code class="html plain">height: 200px;</code></p> <p class="line number13 index12 alt2"><code class="html spaces">            </code><code class="html plain">background: green;</code></p> <p class="line number14 index13 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number15 index14 alt2"><code class="html spaces">        </code><code class="html plain">.second{</code></p> <p class="line number16 index15 alt1"><code class="html spaces">            </code><code class="html plain">float: left;</code></p> <p class="line number17 index16 alt2"><code class="html spaces">            </code><code class="html plain">width: 200px;</code></p> <p class="line number18 index17 alt1"><code class="html spaces">            </code><code class="html plain">height: 200px;</code></p> <p class="line number19 index18 alt2"><code class="html spaces">            </code><code class="html plain">background: red;</code></p> <p class="line number20 index19 alt1"><code class="html spaces">            </code><code class="html plain">margin-left: 20%;</code></p> <p class="line number21 index20 alt2"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number22 index21 alt1"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number23 index22 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number24 index23 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number25 index24 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="first">宽为200，无margin</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number26 index25 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="second">宽为200,margin-left为20%;</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number27 index26 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number28 index27 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p> </td> </tr></tbody></table> <p> </p> <p>In this example, the two elements are set to float to the left so that the horizontal margin of the two elements can be easily observed. Among them, the left p has no margin, and the margin-left of the right p is 20%. The effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/424a4b2edfa6594d295cefdcd1ee676f-12.gif" alt="" style="max-width:90%" style="max-width:90%"></p> <p><strong>It can be seen from the rendering that the distance between the two p It is always 20% of the parent element (the parent element of p on the right here is body, and its width is the browser width). </strong></p> <p> </p> <p> </p> <h3> 　　 (2) Elements at the same level use margin</h3> <p> with a value of % in the vertical direction. Based on the inspiration of Example 7, we It can be guessed that if margin is used in the vertical direction and the value unit is %, then the final distance between the two will be a percentage of the parent element (body in the above example). So is this really the case? See the example below. </p> <p><strong>Example 8</strong></p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br></p> <table border="0"><tbody><tr class="firstRow"> <td class="gutter">## 1<p class="line number1 index0 alt2"></p>2<p class="line number2 index1 alt1"></p>3<p class="line number3 index2 alt2"></p>4<p class="line number4 index3 alt1"></p>5<p class="line number5 index4 alt2"></p>6<p class="line number6 index5 alt1"></p>7<p class="line number7 index6 alt2"></p>8 <p class="line number8 index7 alt1"></p>9<p class="line number9 index8 alt2"></p>10<p class="line number10 index9 alt1"></p>11<p class="line number11 index10 alt2"></p>12<p class="line number12 index11 alt1"></p>13<p class="line number13 index12 alt2"></p>14<p class="line number14 index13 alt1"></p>15<p class="line number15 index14 alt2"></p>16<p class="line number16 index15 alt1"></p>17<p class="line number17 index16 alt2"></p>18<p class="line number18 index17 alt1"></p>19<p class="line number19 index18 alt2"></p>20<p class="line number20 index19 alt1"></p>21<p class="line number21 index20 alt2"></p>22<p class="line number22 index21 alt1"></p>23<p class="line number23 index22 alt2"></p>24<p class="line number24 index23 alt1"></p>25<p class="line number25 index24 alt2"></p>26<p class="line number26 index25 alt1"></p> </td> <td class="code"> <p class="container"><br></p>## <<p class="line number1 index0 alt2"><code class="html plain">head</code><code class="html keyword">><code class="html plain"></code>​ <p class="line number2 index1 alt1"><code class="html spaces"><</code><code class="html plain">meta</code> <code class="html keyword"> charset="UTF-8"></code><code class="html plain"></code>##​ </p> <p class="line number3 index2 alt2"><<code class="html spaces"></code>title<code class="html plain"></code>>margin</<code class="html keyword"> </code>title<code class="html plain"></code>><code class="html keyword"></code><code class="html plain">##​ </code></p><<p class="line number4 index3 alt1"><code class="html spaces">style</code><code class="html plain">> <code class="html keyword"></code><code class="html plain">                                                                                                                                                          #        </code>padding:0;<p class="line number5 index4 alt2"><code class="html spaces"></code><code class="html plain">                                                   {</code></p> <p class="line number6 index5 alt1"><code class="html spaces"></code><code class="html plain">## completely: 200px; </code></p> <p class="line number7 index6 alt2"><code class="html spaces">##; </code><code class="html plain">#                                                                                                                                                                                                </code>#.second{</p> <p class="line number8 index7 alt1"></p> <p class="line number15 index14 alt2"><code class="html spaces">            </code><code class="html plain">width: 200px;</code></p> <p class="line number16 index15 alt1"><code class="html spaces">            </code><code class="html plain">height: 200px;</code></p> <p class="line number17 index16 alt2"><code class="html spaces">            </code><code class="html plain">background: red;</code></p> <p class="line number18 index17 alt1"><code class="html spaces">            </code><code class="html plain">margin-top: 10%;</code></p> <p class="line number19 index18 alt2"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number20 index19 alt1"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number21 index20 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number22 index21 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number23 index22 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="first">高为200，无margin</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number24 index23 alt1"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="second">高为200,margin-top为20%;</</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number26 index25 alt1"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p> </td> </tr></tbody></table> <p>Here, the upper p has no margin, and the margin-top of the lower p is 10. The effect is as follows: </p> <p><img src="https://img.php.cn/upload/article/000/000/007/73737215d222f61d1e7c7f1447c45d1b-13.gif" alt="" style="max-width:90%" style="max-width:90%"></p> <p><strong> </strong></p> <p><strong>We found that when I reduce the height of the browser, in the vertical direction The spacing has not been reduced! ! ! And when I reduce the width of the browser, the vertical distance shrinks! ! ! </strong></p> <p><strong>This means that margin is used in the vertical direction between statistical elements. When the value unit is %, it is relative to the width of the parent element. </strong></p> <p><strong> So why is it not the height relative to the browser as we want? A master on Zhihu explained it this way (original address: https://www.zhihu.com/question/20983035?rf=27109182): </strong></p> <p><strong><img src="https://img.php.cn/upload/article/000/000/007/ba8858fe462ad9a8fb9cdcbc308e9ef1-14.png" alt="" style="max-width:90%" style="max-width:90%"></strong> </p> <p> </p> <h3>　</h3> <h3> </h3> <h3>　(3) Parent-child elements use a margin of %</h3> <p>　　　<strong>For parent-child elements, if in If the unit used in child elements is %margin, then the margin value is relative to the width and height of the parent element (note: this is indeed relative to the height of the parent element!). </strong></p> <p>　 　　　　 <strong>Example 9 　　　　　　　　　　　　　　　　　　　　　　</strong>##　　　　　　　　　　</p> <p><strong></strong> The code is as follows: </p> <p class="cnblogs_Highlighter sh-gutter"><br></p> <p class="syntaxhighlighter html"><br> </p> <table border="0"><tbody><tr class="firstRow"> <td class="gutter"> <p class="line number1 index0 alt2">1</p> <p class="line number2 index1 alt1">2</p> <p class="line number3 index2 alt2">3</p> <p class="line number4 index3 alt1">4</p> <p class="line number5 index4 alt2">5</p> <p class="line number6 index5 alt1">6</p> <p class="line number7 index6 alt2">7</p> <p class="line number8 index7 alt1">8</p> <p class="line number9 index8 alt2">9</p> <p class="line number10 index9 alt1">10</p> <p class="line number11 index10 alt2">11</p> <p class="line number12 index11 alt1">12</p> <p class="line number13 index12 alt2">13</p> <p class="line number14 index13 alt1">14</p> <p class="line number15 index14 alt2">15</p> <p class="line number16 index15 alt1">16</p> <p class="line number17 index16 alt2">17</p> <p class="line number18 index17 alt1">18</p> <p class="line number19 index18 alt2">19</p> <p class="line number20 index19 alt1">20</p> <p class="line number21 index20 alt2">21</p> <p class="line number22 index21 alt1">22</p> <p class="line number23 index22 alt2">23</p> <p class="line number24 index23 alt1">24</p> <p class="line number25 index24 alt2">25</p> <p class="line number26 index25 alt1">26</p> <p class="line number27 index26 alt2"> 27</p> <p class="line number28 index27 alt1">28</p> <p class="line number29 index28 alt2">29</p> <p class="line number30 index29 alt1">30</p> <p class="line number31 index30 alt2">31</p> </td> <td class="code"> <p class="container"><br></p> <p class="line number1 index0 alt2">##<!<code class="html plain"></code>DOCTYPE<code class="html keyword"> </code>html><code class="html plain"></code></p> <p class="line number2 index1 alt1"><<code class="html plain"></code>html<code class="html keyword"> </code>lang= "en"><code class="html plain"></code></p> <p class="line number3 index2 alt2"><<code class="html plain"></code>head<code class="html keyword"></code>><code class="html plain"></code></p>## ​ <p class="line number4 index3 alt1"><code class="html spaces"><</code><code class="html plain">meta</code> <code class="html keyword">charset="UTF-8"></code><code class="html plain"></code>##​ </p> <p class="line number5 index4 alt2"><<code class="html spaces"></code>title<code class="html plain"></code>>Document</<code class="html keyword"></code>title<code class="html plain"></code>><code class="html keyword"></code><code class="html plain">##​ </code></p><<p class="line number6 index5 alt1"><code class="html spaces">style</code><code class="html plain">><code class="html keyword"></code>##                                                             ##margin:0;<code class="html plain"></code>##                                                                                                <p class="line number7 index6 alt2"></p> <p class="line number11 index10 alt2"><code class="html spaces">        </code><code class="html plain">.father{</code></p> <p class="line number12 index11 alt1"><code class="html spaces">            </code><code class="html plain">width: 500px;</code></p> <p class="line number13 index12 alt2"><code class="html spaces">            </code><code class="html plain">height: 300px;</code></p> <p class="line number14 index13 alt1"><code class="html spaces">            </code><code class="html plain">background: red;</code></p> <p class="line number15 index14 alt2"><code class="html spaces">            </code><code class="html plain">overflow: hidden;</code></p> <p class="line number16 index15 alt1"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number17 index16 alt2"><code class="html spaces">        </code><code class="html plain">.son{</code></p> <p class="line number18 index17 alt1"><code class="html spaces">            </code><code class="html plain">width: 100px;</code></p> <p class="line number19 index18 alt2"><code class="html spaces">            </code><code class="html plain">height: 100px;</code></p> <p class="line number20 index19 alt1"><code class="html spaces">            </code><code class="html plain">background: green;</code></p> <p class="line number21 index20 alt2"><code class="html spaces">            </code><code class="html plain">margin-top: 20%;</code></p> <p class="line number22 index21 alt1"><code class="html spaces">            </code><code class="html plain">margin-left: 20%;</code></p> <p class="line number23 index22 alt2"><code class="html spaces">        </code><code class="html plain">}</code></p> <p class="line number24 index23 alt1"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">style</code><code class="html plain">></code></p> <p class="line number25 index24 alt2"><code class="html plain"></</code><code class="html keyword">head</code><code class="html plain">></code></p> <p class="line number26 index25 alt1"><code class="html plain"><</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number27 index26 alt2"><code class="html spaces">    </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="father"></code></p> <p class="line number28 index27 alt1"><code class="html spaces">        </code><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="son"></</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number29 index28 alt2"><code class="html spaces">    </code><code class="html plain"></</code><code class="html keyword">p</code><code class="html plain">></code></p> <p class="line number30 index29 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p> <p class="line number31 index30 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p> </td> </tr></tbody></table> <p>　　在这个例子中，我设置了margin-left的值为20%，margin-top的值为20%，<strong>父元素的width为500px,父元素的height为300px。</strong>下面看看效果吧。</p> <p><img src="https://img.php.cn/upload/article/000/000/007/856d2f11c3d8af9a226d1a5f5414cef7-15.png" alt="" style="max-width:90%" style="max-width:90%"></p> <p>从上图可以看出<strong>子元素的margin-top值最终同样是相对与父元素的宽度而非高度。</strong></p></code></p></code></p> </td> </tr></tbody></table></code></p> </td> </tr></tbody></table>

The above is the detailed content of In-depth understanding of the margin attribute in css. For more information, please follow other related articles on the PHP Chinese website!