深入理解css中的margin屬性
- 巴扎黑原創
- 2017-06-28 13:34:201807瀏覽
<p>深入理解css中的margin屬性</p>
<p> 之前我一直認為margin屬性是一個非常簡單的屬性，但是最近做專案時遇到了一些問題，才發現margin屬性還是有一些「坑」的，下面我會介紹margin的基本知識以及那些「坑」。這篇部落格文章主要分為以下幾個部分：</p>
<ul class=" list-paddingleft-2">
<li><p>margin--基礎知識</p></li>
<li><p>margin--在同級元素（非父子關係）之間應用</p></li>
<li><p>margin--在父元素和子元素之間應用（<strong>重點</strong>）</p></li>
<li>
<p>margin --margin值的單位為%時的幾種情況</p>
<p> </p>
</li>
</ul>
<h2>#第一部分：margin--基礎知識</h2>
<p> 要介紹margin的基礎知識，我們不可迴避地要談到<a href="http://www.php.cn/code/790.html" target="_blank">css盒子模型</a>（Box Model），一般而言，css盒子模型是用來設計和佈局的。它本質上是一個盒子，包括：外邊距（margin）、邊框（border）、內邊距（padding）以及最中間的內容（content）。下圖即為盒子模型（這裡只談W3C規範的標準盒模型，而不談IE5和IE6在怪異模式中使用的非標準的盒子模型）：</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> 我們要介紹的margin在最外層，因為margin（外邊距）一定是透明的，所以它可以用來使得不同的盒子之間留有一定的間隙從而達到佈局美觀等效果。從上面的盒子模型中我們可以看到，margin在四周均存在，我們可以使用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>、margin-left分別設定這四個方向的margin值。 （註：由於這部分知識較為基礎，所以我不再在這部分不做更多介紹）</p>
<p> </p>
<p> </p>
<h2>第二部：margin--在同層級元素（非父子關係）之間應用</h2>
<p> 這一部分主要介紹水平方向和垂直方向的外邊距的合併問題。 </p>
<h2> （1）水平方向的外邊距合併</h2>
<p> <strong>兩個水平方向的盒子相遇，那麼最終兩者之間的距離為左邊盒子的右外邊距和右邊盒子的做外邊距和。 </strong></p>
<p><strong> 例1：</strong></p>
<p><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">
<td class="gutter">
<p class="line number1 index0 alt2">#1</p>
<p class="line number2 index1 alt1">2</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">##10</p>
<p class="line number10 index9 alt1"></p>
<p class="line number11 index10 alt2"></p>
<p class="line number12 index11 alt1"></p>
<p class="line number13 index12 alt2"></p>11<p class="line number14 index13 alt1"></p>12<p class="line number15 index14 alt2"></p>13<p class="line number16 index15 alt1"></p>14<p class="line number17 index16 alt2"></p>#15<p class="line number18 index17 alt1"></p>#16<p class="line number19 index18 alt2"></p>#17<p class="line number20 index19 alt1"></p># 18<p class="line number21 index20 alt2"></p>19<p class="line number22 index21 alt1"></p>20<p class="line number23 index22 alt2"></p>21<p class="line number24 index23 alt1"></p>#22<p class="line number25 index24 alt2"></p>#23<p class="line number26 index25 alt1"></p>#24<p class="line number27 index26 alt2"></p>
<p class="line number28 index27 alt1">25 </p>
<p class="line number29 index28 alt2">26</p>
<p class="line number30 index29 alt1">27</p>
<p class="line number31 index30 alt2">28</p>
<p class="line number32 index31 alt1">29</p>
<p class="line number33 index32 alt2">30</p>
<p class="line number34 index33 alt1">31</p>
<p class="line number35 index34 alt2">32</p>
<p class="line number36 index35 alt1">33</p>
<p class="line number37 index36 alt2">34</p>
</td>35<td class="code">
<p class="container">36<br></p>37<p class="line number1 index0 alt2"><code class="html plain"></code><code class="html keyword"></code> <code class="html plain"></code>##<!</p><p class="line number2 index1 alt1">DOCTYPE<code class="html plain"> </code>html><code class="html keyword"></code><code class="html plain"></code><</p><p class="line number3 index2 alt2">html<code class="html plain"> </code>lang="en"><code class="html keyword"></code><code class="html plain"></code><</p>###head######>#####</p>
<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><code class="html keyword">title</code><code class="html plain">>水平方向的兩個盒子</</code><code class="html keyword">title</code>##><code class="html plain"></code></code></p>
<p class="line number6 index5 alt1"> <code class="html spaces"></code><<code class="html plain"></code>style<code class="html keyword"></code>><code class="html plain"></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><code class="html plain"></code></p>
<p class="line number9 index8 alt2"><code class="html spaces">##' </code><code class="html plain"></code></p> <p class="line number10 index9 alt1"><code class="html spaces">margin:0;</code><code class="html plain"></code></p> <p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain">border:0;</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code> <code class="html plain">body{</code></p>
<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">#font-size: 0;</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">#.left{<code class="html spaces"></code><code class="html plain"></code> 1 </p> <p class="line number16 index15 alt1"><code class="html spaces">#height: 100px;</code><code class="html plain"></code></p> <p class="line number17 index16 alt2"> <code class="html spaces">display: inline-block;</code><code class="html plain"></code></p> <p class="line number18 index17 alt1"><code class="html spaces">margin-right: 50px;# </code> #font-size: 20px;<code class="html plain"></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></p>#width: 100px;<p class="line number21 index20 alt2"><code class="html spaces"></code><code class="html plain"> 1 </code> </p>
<p class="line number22 index21 alt1">#background: yellow;<code class="html spaces"></code><code class="html plain"></code> </p>
<p class="line number23 index22 alt2">margin-left: 50px;<code class="html spaces"></code>#</p>
<p class="line number29 index28 alt2"><code class="html spaces"> </code><code class="html plain">font-size: 20px;</code></p>
<p class="line number30 index29 alt1"><code class="html spaces"> </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"></code>style<code class="html plain"></code>></p>
<p class="line number32 index31 alt1"><code class="html plain"></code>#</<code class="html keyword">##head</code><code class="html plain">></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 spaces"> </code><code class="html plain"># <</code><code class="html keyword">p</code> <code class="html plain">class="left">寬為100px,右邊距為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><code class="html plain"><</code><code class="html keyword">p</code> <code class="html plain">class="right">寬為100px,左邊距為50px</</code> <code class="html keyword">p</code><code class="html plain">></code></p>
<p class="line number36 index35 alt1"><code class="html plain"></</code><code class="html keyword">body</code><code class="html plain">></code></p>
<p class="line number37 index36 alt2"><code class="html plain"></</code><code class="html keyword">html</code><code class="html plain">></code></p>
</td>
</tr></tbody></table>#<p> 效果如下：</p>
<p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-1.png" alt=""></p>
<p>這時兩者之間的距離剛好為100px。 </p>
<p> 補充說明：大家可以看到，為了使得兩個p（塊狀元素）脫離正常的文檔流我使用了display:inline-block;屬性，<strong>另外，我還把body的font-size設定為0，這樣可以解決inline-block本身的問題（</strong>如果不清楚這裡的描述可以看我的博文《理解與應用css中的display屬性》，這篇文章介紹了inline-block存在的問題<strong>），</strong>否則兩個p的舉例會大於100px。當然使用float也可以讓兩個p出現在同一行。 </p>
<p> </p>
<h2> （2）垂直方向的外邊距合併</h2>
<p> <strong>兩個垂直方向的盒子相遇時，其垂直方向的距離等於上方盒子的下外邊距和下方盒子的上外邊距中較大的一個。 </strong></p>
<p><strong> 例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"></p>
<p class="line number2 index1 alt1"></p>
<p class="line number3 index2 alt2"></p>
<p class="line number4 index3 alt1"></p>
<p class="line number5 index4 alt2"></p>
<p class="line number6 index5 alt1"></p>
<p class="line number7 index6 alt2"></p>
<p class="line number8 index7 alt1"></p>
<p class="line number9 index8 alt2"></p>
<p class="line number10 index9 alt1"></p>
<p class="line number11 index10 alt2"></p>
<p class="line number12 index11 alt1"></p>
<p class="line number13 index12 alt2"></p>
<p class="line number14 index13 alt1"></p>
<p class="line number15 index14 alt2"></p>
<p class="line number16 index15 alt1"></p>
<p class="line number17 index16 alt2"></p>
<p class="line number18 index17 alt1">1</p>
<p class="line number19 index18 alt2">2</p>
<p class="line number20 index19 alt1">3</p>##4<p class="line number21 index20 alt2">##5</p>
<p class="line number22 index21 alt1"></p>
<p class="line number23 index22 alt2"></p>
<p class="line number24 index23 alt1"></p> #6<p class="line number25 index24 alt2"></p>7<p class="line number26 index25 alt1"></p>8<p class="line number27 index26 alt2"></p>9<p class="line number28 index27 alt1"></p>10<p class="line number29 index28 alt2"></p>11<p class="line number30 index29 alt1">##12</p>
</td> 13<td class="code">
<p class="container">14<br></p>15<p class="line number1 index0 alt2"><code class="html plain">16</code><code class="html keyword">#17</code><code class="html plain">18</code></p>#19<p class="line number2 index1 alt1"><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
<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"><code class="html spaces"></code><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
<p class="line number5 index4 alt2"><code class="html spaces"></code><code class="html plain"></code><code class="html keyword"></code><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><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></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><code class="html plain"></code></p>
<p class="line number9 index8 alt2"><code class="html spaces"></code><code class="html plain"></code></p>
<p class="line number10 index9 alt1"><code class="html spaces"></code><code class="html plain"></code></p>
<p class="line number11 index10 alt2"><code class="html spaces"></code><code class="html plain"></code></p>20 <p class="line number12 index11 alt1"><code class="html spaces">21</code><code class="html plain">22</code></p>23######24######25######26######27# #####28######29######30########################<!### ###DOCTYPE### ###html>############<######html### ###lang="en">#### ########<######head######>############# ######<######## ######<##### #meta### ###charset="UTF-8">############# ######<#######title####### >兩個水平方向的盒子</######title######>############ ######<#### ##style######>############ #####*{############# :0;############ ######padding:0;############ ########## #######}############ #######.<p class="line number13 index12 alt2"><code class="html spaces"> </code><code class="html plain">width: 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>1: <code class="html plain"></code>margin-bottom: 100px;</p>
<p class="line number16 index15 alt1"><code class="html spaces"></code> <code class="html plain"></code></p>## 我：red ##}<p class="line number17 index16 alt2"><code class="html spaces"></code><code class="html plain"> </code></p>.bottom{<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></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></p>
<p class="line number22 index21 alt1"><code class="html spaces">4x </code><code class="html plain">## </code></p>height: 100px;<p class="line number23 index22 alt2"><code class="html spaces"></code><code class="html plain"> </code># </p>
<p class="line number24 index23 alt1">#background: green;<code class="html spaces"></code><code class="html plain"></code> <code class="html keyword">#1 #</</code><code class="html plain">style</code></p>><p class="line number25 index24 alt2"><code class="html plain"></code><code class="html keyword">#</</code><code class="html plain">head</code></p>#><p class="line number26 index25 alt1"><code class="html plain"></code><code class="html keyword"><</code>##body<code class="html plain"></code>></code></p>
<p class="line number27 index26 alt2"><code class="html spaces"></code> <code class="html plain"></code><<code class="html keyword"></code>p<code class="html plain"> </code>class="top">高為100px,下邊距為100px</<code class="html keyword"></code>p<code class="html plain"></code>></p>
<p class="line number28 index27 alt1"><code class="html spaces"></code> <code class="html plain"></code><<code class="html keyword"></code>p<code class="html plain"> </code>class="bottom">高為100px,上邊距為50px</<code class="html keyword"></code>p <code class="html plain"></code>></p>
<p class="line number29 index28 alt2"><code class="html plain"></code></<code class="html keyword"></code>body<code class="html plain"></code>></p>
<p class="line number30 index29 alt1"><code class="html plain">## </</code><code class="html keyword">html</code><code class="html plain">></code></p></code></p></code></p>
</td>
</tr></tbody></table>#<p> 效果如下：</p>
<p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-2.png" alt=""></p>
<p>這時我們肉眼都可以觀察出來，兩者垂直方向的舉例大約為100px（實際就是100px）而非100+50 =150px；這正是因為<strong>兩個垂直方向的盒子相遇時，其垂直方向的距離等於上方盒子的下外邊距和下方盒子的上外邊距中較大的一個。 </strong></p>
<p><strong> </strong></p>
<p><strong> 另外一個有趣的例子就是：假設有一個元素同時設定了margin-top和margin-bottom，但是內容為空，那麼這兩個margin值也會疊加，值為兩者最大的一個，它類似與垂直方向上兩個盒子margin值的疊加。程式碼如下：</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>##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"></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>>水平方向的兩個盒子</<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>style<code class="html keyword"></code>><code class="html plain"></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">margin:0;</code><code class="html plain"></code></p> <p class="line number9 index8 alt2"><code class="html spaces"></code> <code class="html plain"></code>#padding:0;</p>
<p class="line number10 index9 alt1"><code class="html spaces"></code> <code class="html plain"></code># </p>
<p class="line number11 index10 alt2"></p> <p class="line number12 index11 alt1"><code class="html spaces">.top{</code><code class="html plain"></code></p> <p class="line number13 index12 alt2"></p>
<p class="line number14 index13 alt1"><code class="html spaces"> </code><code class="html plain">高度：100px;</code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">}</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"># 100px;</code><code class="html plain"></code></p> <p class="line number18 index17 alt1"><code class="html spaces">margin-bottom:50px;</code><code class="html plain"></code>## </p>
<p class="line number19 index18 alt2"># <code class="html spaces"></code>.footer{<code class="html plain"></code></p>
<p class="line number20 index19 alt1"> <code class="html spaces"></code>#100pxx <code class="html plain"></code>高度：100px;</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> </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></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>
<code class="html spaces">#主題</code><code class="html plain"> ></code><code class="html keyword"></code><code class="html plain"> </code><code class="html plain">p</code> <code class="html keyword">class="top">上面的p，高100px </code><code class="html plain"> p</code>><p class="line number29 index28 alt2"><code class="html plain"></code><code class="html keyword"> </code><code class="html plain">#</code></p>p<p class="line number30 index29 alt1"> <code class="html spaces">class= "中"></code><code class="html plain">p</code><code class="html keyword">></code><code class="html plain"></code><code class="html keyword"> </code><code class="html plain"></code></p>p <p class="line number31 index30 alt2"> <code class="html spaces">class="footer">下面的p，高100px</code><code class="html plain">p</code><code class="html keyword">></code><code class="html plain"></code><code class="html keyword">##body<code class="html plain"></code>> </code></p>
<p class="line number32 index31 alt1"><code class="html spaces"></code><code class="html plain"></code>html<code class="html keyword"></code>><code class="html plain"></code><code class="html keyword"></code><code class="html plain">##<p> 最終的效果如下：</p>
<p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-3.png" alt=""></p>
<p> 我們發現這時在上面的p和在下面的p之間的舉例並不是100+50=150px，而是兩者中的最大者，即100px。 </p>
<p><strong> </strong></p>
<p> 那麼W3C為什麼會設定這樣的標準而不設定和水平方向一樣的標準呢？即margin值的疊加，其實這也是有一定的道理的。例如我們需要設計一個由若干個段落構成的一個頁面。我們需要設定margin-top和margin-bottom使得第一段和頁面的最上方有一段距離，讓最後一段和最下方有一段距離。下面是不疊加和疊加的效果圖：</p>
<p><img src="https://img.php.cn/upload/article/000/000/007/d27cd8e47c9fd00076f4232fc6379b18-4.png" alt=""></p>
<p>我們可以看到左邊的頁面沒有重疊，那麼兩個段落之間的舉例就是最上方的兩倍間距了，而右邊的頁面發生了重疊，則所有的間距都是相等的。或許這就是這樣設定標準的目的吧，誰知道呢？ </p>
<p> </p>
<p> </p>
<h2>第三部分：margin--在父元素與子元素之間應用（<strong>重點</strong>）</h2>
<p> 第二部分介紹了同級元素之間使用margin，而這一部分將要介紹最有趣的父元素和子元素之間margin的應用。這一部分，我們同樣從兩個面向來討論。一方面是子元素設定水平方向上的margin值，另一方面是子元素設定垂直方向的margin值。 </p>
<h3> （1）在子元素中設定水平方向的margin值</h3>
<p># 我們可以設定margin-left來控制子元素的左邊框和父元素的左邊框之間的範例。 </p>
<p> 例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">
<p class="line number1 index0 alt2"></p>
<p class="line number2 index1 alt1"></p>
<p class="line number3 index2 alt2"></p>
<p class="line number4 index3 alt1"></p>
<p class="line number5 index4 alt2">##1</p>
<p class="line number6 index5 alt1"></p>
<p class="line number7 index6 alt2"></p>
<p class="line number8 index7 alt1"></p>
<p class="line number9 index8 alt2"></p>
<p class="line number10 index9 alt1"></p>
<p class="line number11 index10 alt2"></p>
<p class="line number12 index11 alt1"></p>
<p class="line number13 index12 alt2"></p>
<p class="line number14 index13 alt1"></p>#2<p class="line number15 index14 alt2"></p>3<p class="line number16 index15 alt1"></p>4<p class="line number17 index16 alt2"></p>#5<p class="line number18 index17 alt1"></p>6<p class="line number19 index18 alt2"></p>7<p class="line number20 index19 alt1">##8</p>
<p class="line number21 index20 alt2"></p>
<p class="line number22 index21 alt1"></p>
<p class="line number23 index22 alt2"></p> #9<p class="line number24 index23 alt1"></p>10<p class="line number25 index24 alt2"></p>11<p class="line number26 index25 alt1"></p>12</td>
<td class="code">#13<p class="container"><br>#14</p>
<p class="line number1 index0 alt2">#15<code class="html plain"></code> 16<code class="html keyword"></code>17<code class="html plain"></code>18</p>
<p class="line number2 index1 alt1">19<code class="html plain"></code>#20<code class="html keyword"></code>#21<code class="html plain"></code>#22</p>
<p class="line number3 index2 alt2">##23 <code class="html plain"></code>24<code class="html keyword"></code>25<code class="html plain"></code>26</p>
<p class="line number4 index3 alt1"><code class="html spaces"></code><code class="html plain"></code><code class="html keyword"></code>#<!<code class="html plain"></code>DOCTYPE</p> <p class="line number5 index4 alt2">html><code class="html spaces"></code><code class="html plain"></code>#<<code class="html keyword"></code>html<code class="html plain"> </code>lang="en"><code class="html keyword"> </code><code class="html plain"></code><</p><p class="line number6 index5 alt1">head<code class="html spaces"></code>><code class="html plain"></code><code class="html keyword"></code> <code class="html plain"></code><</p><p class="line number7 index6 alt2">meta<code class="html spaces"> </code>charset="UTF-8"><code class="html plain"></code></p>
<p class="line number8 index7 alt1"># <code class="html spaces"></code>#<<code class="html plain"></code>#title</p><p class="line number9 index8 alt2"> #>margin</<code class="html spaces"></code>title<code class="html plain"></code>#></p>######### ######<######style### ####>############ ######*{padding:0; margin:0; border:0;}################### # ######.father{############ ######width: 500px;######<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">高度：500px;</code></p>
<p class="line number11 index10 alt2"><code class="html spaces"> </code><code class="html plain"> </code></p>}<p class="line number12 index11 alt1"><code class="html spaces"></code><code class="html plain"> </code></p>.son{<p class="line number13 index12 alt2"><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"> </code></p>為高度：100px;<p class="line number15 index14 alt2"><code class="html spaces"></code><code class="html plain"> # </code></p> <p class="line number16 index15 alt1"><code class="html spaces">左距：100px;</code><code class="html plain"></code>## </p>#<p class="line number17 index16 alt2"><code class="html spaces">風格</code><code class="html plain">></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>body<code class="html keyword"></code>><code class="html plain"></code></p>
<p class="line number20 index19 alt1"># <code class="html plain"></code> <code class="html plain"></code></p>
<p class="line number21 index20 alt2"><code class="html plain"></code><code class="html keyword"></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"></code><code class="html plain"></code></p>
<p class="line number23 index22 alt2"><code class="html spaces"></code> #p<code class="html plain"># </code>class="父親"><code class="html keyword"></code><code class="html plain">## </code><code class="html keyword"></code><code class="html plain">#p</code> </p>
<p class="line number24 index23 alt1">class= "son">寬度為100px，margin-left為100px。 <code class="html spaces"></code>p<code class="html plain"></code>><code class="html keyword"></code><code class="html plain"></code></p>
<p class="line number25 index24 alt2">#body<code class="html plain"></code>><code class="html keyword"></code><code class="html plain"></code></p>
<p class="line number26 index25 alt1"><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
</td>
</tr></tbody></table>################################## ##########html######>############### ####<p> 我將子元素的margin-left設定為了100px;效果如下：</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>即子元素的左邊框和父元素的左邊框之間的距離為100px。 <strong>與在同級元素之間設定margin不同，因為同級元素之間的margin不會考慮到padding,但是在父元素和子元素就不同了，那麼如果父元素中如果有padding，效果會是什麼樣的呢？ </strong>請看下面一個例子：</p>
<p> 例4：</p>
<p> 下面我們在上面範例的基礎上為父元素新增padding值。 </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>
</td>
<td class="code">
<p class="container"><br></p>
<p class="line number1 index0 alt2"><code class="html plain"><!</code><code class="html keyword">DOCTYPE</code> <code class="html plain">html></code></p>
<p class="line number2 index1 alt1"><code class="html plain"><</code><code class="html keyword">html</code> <code class="html plain">lang="en"></code></p> <p class="line number3 index2 alt2"><code class="html plain">#<</code><code class="html keyword">head</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"> 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>> ;margin</<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>#style<code class="html keyword"></code>><code class="html plain"></code></p>
<p class="line number7 index6 alt2"> <code class="html spaces"></code>*{padding:0; margin:0; border:0;}<code class="html plain"></code></p>
<p class="line number8 index7 alt1"> <code class="html spaces">##.father{</code><code class="html plain"></code></p> <p class="line number9 index8 alt2"><code class="html spaces">width: 500px;</code># <code class="html plain"> 500px;</code></p>
<p class="line number10 index9 alt1"><code class="html spaces"> </code><code class="html plain">padding:100px;</code></p>## ## <p class="line number11 index10 alt2"><code class="html spaces">## </code><code class="html plain">#}</code></p>
<p class="line number12 index11 alt1"><code class="html spaces"> </code><code class="html plain">.son{</code> </p>#width: 100px;<p class="line number13 index12 alt2"><code class="html spaces"><p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">高度：100px;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">左距：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></p>
<p class="line number20 index19 alt1"><code class="html spaces"># </code><code class="html plain">## ; /</code><code class="html keyword">風格</code><code class="html plain">></code></p>
<p class="line number21 index20 alt2"><code class="html plain"></code><code class="html keyword">頭</code><code class="html plain">></code> </p>
<p class="line number22 index21 alt1"><code class="html plain">#<code class="html keyword">body</code><code class="html plain">></code></code></p>
<p class="line number23 index22 alt2"><code class="html spaces"># </code><code class="html plain"><code class="html keyword">p</code># <code class="html plain">class="父親"></code></code></p>
<p class="line number24 index23 alt1"><code class="html spaces"> </code><code class="html plain"><code class="html keyword">p</code> <code class="html plain">class ="son">寬度為100px， margin-left為100px。 </code>##><code class="html keyword"></code><code class="html plain"></code></code></p>
<p class="line number25 index24 alt2">body<code class="html spaces"></code>#> <code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code>html</p>
<p class="line number26 index25 alt1">><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
<p> 上面的程式碼為父元素添加了100px的padding值，效果如下：</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>我們可以看到子元素舉例上方的距離為100px，因為子元素一定是在父元素的content的部分的，這點毫無疑問。 </p>
<p><strong>但是經過測量可以發現子元素的左邊框距離父元素的左邊框之間的距離為200px</strong>，因為其中還有100px的左padding值，前面的例子因為我沒有設定padding值，所以沒有觀察出來，<strong>因此這就說明了在子元素中設定margin-left，其值實際上是子元素的左邊框距離父元素左padding內側的距離。 </strong></p>
<p> </p>
<p> 例5：margin-right的使用和margin-left的使用是相似的，我在這裡只舉一個例子。 </p>
<p> 這個範例在子元素中設定了margin-right值，如下所示：</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>##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>
<p class="line number21 index20 alt2"></p>
<p class="line number22 index21 alt1"></p>
<p class="line number23 index22 alt2"></p>
<p class="line number24 index23 alt1"></p>
<p class="line number25 index24 alt2"></p>
<p class="line number26 index25 alt1"></p>
<p class="line number27 index26 alt2"></p>
<p class="line number28 index27 alt1"></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"></code><code class="html plain"></code></p>
<p class="line number2 index1 alt1"><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
<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"><code class="html spaces"></code><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
<p class="line number5 index4 alt2"><code class="html spaces"></code><code class="html plain"></code><code class="html keyword"></code>##21 <code class="html plain"></code>22<code class="html keyword"></code>23<code class="html plain"></code>24</p>
<p class="line number6 index5 alt1">25<code class="html spaces"></code>26<code class="html plain"></code>27<code class="html keyword"></code>28<code class="html plain"></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">DOCTYPE<code class="html spaces"> </code>html><code class="html plain"></code></p>
<p class="line number9 index8 alt2"><code class="html spaces"></code><code class="html plain"></code></p>
<p class="line number10 index9 alt1"><code class="html spaces"></code><code class="html plain"></code></p>
<p class="line number11 index10 alt2"><code class="html spaces"></code><code class="html plain"></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"></code>##<</p>###html### ###lang="en">#############<#######head###################################### ##>############ #######<######meta### ###charset="UTF-8">##### ######## ######<######title######>margin</######title######># ########### ######<######style#######>############ ########## ##*{padding:0; margin:0; border:0;}############# ######.father{######################.father{############ ######width: 500px;############ #######height: 500px;### padding:100px;############ ######### ######background: red;######## }## #</p>
<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"></code>#寬度：100px;</p>
<p class="line number16 index15 alt1"><code class="html spaces"></code> <code class="html plain"></code>為高度：100px;</p> <p class="line number17 index16 alt2"> : 綠色;<code class="html spaces"></code><code class="html plain"></code> </p>
<p class="line number18 index17 alt1">右距: 100px;<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>風格</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"></code>主題</p>
<p class="line number22 index21 alt1">><code class="html plain"></code><code class="html keyword"></code># <code class="html plain"></code></p>
<p class="line number23 index22 alt2">p<code class="html plain"># </code>class="father"><code class="html keyword"></code><code class="html plain"></code> </p>
<p class="line number24 index23 alt1"># #p<code class="html plain"># </code>class="son">寬度為100px，margin-right為100px。 <code class="html keyword"># </code><code class="html plain"></code></p>p<p class="line number25 index24 alt2"><code class="html spaces">#></code><code class="html plain"></code><code class="html keyword"> </code>##body<code class="html plain"></code><code class="html keyword"></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"></code><code class="html plain"></code></p>
<p class="line number27 index26 alt2"><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
<p class="line number28 index27 alt1"><code class="html plain"></code><code class="html keyword"></code><code class="html plain">##都</code>></p>
</td>
</tr>
</tbody></table>###html######>##### ######################<p> 這個例子與例4的差異僅在與子元素的位置不同。效果如下：</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>透過<strong>這個範例可以說明margin-right的值是子元素的右邊框和父元素的右padding內側的距離</strong>。只是前面的幾個例子我沒有使用padding，所以我無法觀察出來。 </p>
<p> </p>
<p> </p>
<p> </p>
<h3> （2）在子元素中設定垂直方向的margin值</h3>
<p> 依照前面的經驗，理論上來說，我們同樣可以透過設定margin-top的值使得<strong>子元素的上邊框和父元素的上padding的內側</strong>留有一定的距離。那我們就試試吧！ </p>
<p> 例6：</p>
<p> </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"></p>
<p class="line number2 index1 alt1"></p>
<p class="line number3 index2 alt2"></p>
<p class="line number4 index3 alt1"></p>
<p class="line number5 index4 alt2"></p>
<p class="line number6 index5 alt1"></p>
<p class="line number7 index6 alt2"></p>
<p class="line number8 index7 alt1"></p>
<p class="line number9 index8 alt2"></p>
<p class="line number10 index9 alt1"></p>
<p class="line number11 index10 alt2"></p>
<p class="line number12 index11 alt1"></p>
<p class="line number13 index12 alt2"></p>
<p class="line number14 index13 alt1"></p>
<p class="line number15 index14 alt2"></p>
<p class="line number16 index15 alt1"></p>
<p class="line number17 index16 alt2"></p>
<p class="line number18 index17 alt1"></p>
<p class="line number19 index18 alt2"></p>
<p class="line number20 index19 alt1"></p>
<p class="line number21 index20 alt2">1</p>
<p class="line number22 index21 alt1">2</p>
<p class="line number23 index22 alt2">3</p>
<p class="line number24 index23 alt1">4</p>
<p class="line number25 index24 alt2">5</p>##6<p class="line number26 index25 alt1"></p>7</td>
<td class="code"># 8<p class="container"><br>9</p>
<p class="line number1 index0 alt2">10<code class="html plain"></code>11<code class="html keyword"></code>#12<code class="html plain"></code>13</p>
<p class="line number2 index1 alt1">14<code class="html plain"></code>15 <code class="html keyword"></code>16<code class="html plain"></code>17</p>
<p class="line number3 index2 alt2">18<code class="html plain"></code>19<code class="html keyword"></code>20<code class="html plain"></code>21</p>
<p class="line number4 index3 alt1">22<code class="html spaces"></code>23<code class="html plain"></code>24<code class="html keyword"></code>25<code class="html plain"></code>26</p>
<p class="line number5 index4 alt2"><code class="html spaces"></code><code class="html plain"></code><code class="html keyword"># #<!</code><code class="html plain">DOCTYPE</code> <code class="html keyword">html></code><code class="html plain"></code></p>#<<p class="line number6 index5 alt1"><code class="html spaces">html</code> <code class="html plain">#lang="en "><code class="html keyword"></code><code class="html plain"><</code></p>head<p class="line number7 index6 alt2"><code class="html spaces">#></code><code class="html plain"></code> <p class="line number8 index7 alt1"><code class="html spaces"># <</code><code class="html plain">meta</code> </p>charset="UTF-8"><p class="line number9 index8 alt2"><code class="html spaces"></code><code class="html plain"> </code></p><<p class="line number10 index9 alt1"><code class="html spaces"># title</code><code class="html plain">>margin</</code></p>title<p class="line number11 index10 alt2"><code class="html spaces">#></code><code class="html plain"></code>## </p>
<p class="line number12 index11 alt1">#<<code class="html spaces"></code>#style<code class="html plain"></code>></p>
<p class="line number13 index12 alt2"><code class="html spaces"></code> <code class="html plain"></code>*{padding:0; margin:0; border:0;}</p>
<p class="line number14 index13 alt1"><code class="html spaces"></code> <code class="html plain"></code>.father{</p>######### ######width: 500px;############ ######height: 500px;############ #######background: red;####### }############ #######.son{############ <p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">高度：100px;</code></p>
<p class="line number16 index15 alt1"><code class="html spaces"> </code><code class="html plain">上方邊距：100px;</code></p>
<p class="line number17 index16 alt2"><code class="html spaces"> </code><code class="html plain">}</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"></code>><code class="html plain"></code></p>
<p class="line number20 index19 alt1"><code class="html plain"></code>頭<code class="html keyword"></code>><code class="html plain"> </code></p>
<p class="line number21 index20 alt2">#body<code class="html keyword"></code>><code class="html plain"></code></p>
<p class="line number22 index21 alt1"># <code class="html spaces"></code>p<code class="html keyword"># </code>class="父親"><code class="html plain"></code></p>
<p class="line number23 index22 alt2"> <code class="html spaces"></code>p<code class="html keyword"> </code>class ="son">高度為100px， margin-top為100px。 <code class="html plain">##></code><code class="html keyword"></code><code class="html plain"></code></p>body<p class="line number24 index23 alt1"><code class="html spaces">#> </code><code class="html plain"></code><code class="html keyword"></code><code class="html plain">html</code></p>><p class="line number25 index24 alt2"><code class="html plain"></code><code class="html keyword"></code><code class="html plain"><p> 這個例子我設定了margin-top為100px，效果如下：</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>這不是我們想要的效果啊，我們希望子元素的上部距離父元素的上部為100px，可是我們看到的卻是父元素的上部距離瀏覽器頁面的上部有100px的距離，這是為什麼呢？哪裡出現問題了呢？ </strong></p>
<p><strong> </strong></p>
<p><strong> 其實這是因為當父元素沒有設定padding值以及border值時，出現了一個bug--父元素的上方與子元素的上方完全重合在了一起，無法分開。所以才會導致上述這種父元素和子元素同時向下的情況。 </strong></p>
<p><strong> 對於這個問題解決方法有以下幾種：</strong></p>
<ul class=" list-paddingleft-2">
<li><p><strong>方法一：為父元素新增<a href="http://www.php.cn/wiki/949.html" target="_blank">padding-top</a>值</strong></p></li>
<li><p><strong>方法二：為父元素新增border值</strong></p></li>
<li><p> <strong>方法三：為父元素新增屬性overflow:hidden;</strong></p></li>
<li>
<p><strong>#方法四：給父元素或子元素宣告浮動float</strong></p> </li>
<li><p><strong>#方法五：讓父元素或子元素宣告為<a href="http://www.php.cn/code/6074.html" target="_blank">絕對定位</a>：position:absolute;</strong></p></li>
<li><p><strong>方法六：為父元素添加屬性</strong> overflow:auto; positon:relative；（註：此方法為後續添加，感謝博友@小精靈Pawn提供此方法）</p></li>
</ul>
<p># <strong>方法一：基於範例6，在父元素的css程式碼中加入padding-top:1px;效果如下：</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>
<p><strong>方法的唯一缺點就是增加了1px的誤差。 </strong></p>
<p><strong> </strong></p>
<p><strong> 方法二：基於例6，在父元素的css程式碼中加入border-top:1px solid transparent;效果如下： </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>
<p><strong>#同樣達到了效果， 缺點同方法一。 </strong></p>
<p><strong> </strong></p>
<p><strong> 方法三：基於例6，在父元素的css程式碼中加入overflow:hidden;效果如下：</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>
<p><strong>也達到了效果，並且沒有任何誤差的存在。堪稱perfect!!!!</strong></p>
<p><strong> </strong></p>
<p><strong> 方法四：給父元素或子元素宣告float;基於例6，在子元素css程式碼加入float:left;或在父元素css程式碼加入float:left;都達到效果，這裡不再展示相同的圖片。 </strong></p>
<p><strong> 優點：沒有像素的誤差。 缺點：float有時是不必要的。 </strong></p>
<p> </p>
<p><strong> 方法五：為父元素或子元素新增position:absolute;屬性。 同樣達到效果。 </strong></p>
<p><strong> 優點：同方法四。 且只要我們不使用top和left也不會有任何影響，所以這也是不錯的方法。 </strong></p>
<p>（說明：博友 ＠laden666666 指出，上述方法三、四、五其實都是去除子元素margin穿透父容器的方法，可以歸類為bfc法，本質相同。在此表示感謝） </p>
<p> <strong>方法六：為父元素加上overflow:auto;和position:relative;同樣達到效果。 </strong></p>
<p><strong> 此方法親測有效，由博友 @小精靈Pawn提供，在此表示感謝。 </strong></p>
<p> </p>
<p> </p>
<h2>第四部分：margin值的單位為%時的幾種情況</h2>
<p> 之前我舉例子時使用margin，它的值都是以px為單位的，這個理解起來沒有問題。 <strong>但是如果margin值是以%為單位呢？實際上這時候百分比（%）是相對於該元素的父元素（容器），對於同級元素和父子元素都是如此。 （</strong>再次感謝 博友@小精靈Pawn 提供的建議！！基於此建議補充這部分內容） 但是在同級元素中使用垂直方向的margin時會出現意想不到的結果，下面舉例說明。 </p>
<h3> （1）同級元素在水平方向使用值為%的margin</h3>
<p> 例7：</p>
<p> </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>##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>
<p class="line number18 index17 alt1"></p>
<p class="line number19 index18 alt2"></p>
<p class="line number20 index19 alt1"></p>
<p class="line number21 index20 alt2"></p>
<p class="line number22 index21 alt1"></p>
<p class="line number23 index22 alt2"></p>
<p class="line number24 index23 alt1"></p>
<p class="line number25 index24 alt2"></p> #18<p class="line number26 index25 alt1"></p>19<p class="line number27 index26 alt2"></p>20<p class="line number28 index27 alt1"></p>21</td>
<td class="code">#22<p class="container"><br>23</p>
<p class="line number1 index0 alt2">#24<code class="html plain"></code> # 25<code class="html keyword"></code>26<code class="html plain"></code>27</p>
<p class="line number2 index1 alt1">28<code class="html spaces"></code><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code>#</p>
<p class="line number3 index2 alt2">head<code class="html spaces"></code>><code class="html plain"></code><code class="html keyword"></code> <code class="html plain"></code>meta<code class="html plain"> </code>#charset="UTF -8"></p>
<p class="line number4 index3 alt1"><code class="html spaces"></code> <code class="html plain"></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"></code></p>><p class="line number7 index6 alt2"><code class="html spaces"></code><code class="html plain"> </code></p>#<code class="html spaces">風格</code>##><code class="html plain"></code> <p class="line number9 index8 alt2"><code class="html spaces"></code><code class="html plain"></code></p>
<p class="line number10 index9 alt1"><code class="html spaces"></code><code class="html plain"></code></p>
<p class="line number11 index10 alt2"><code class="html spaces"></code><code class="html plain"></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"></code></p>##*{<p class="line number14 index13 alt1"><code class="html spaces"></code><code class="html plain"> </code></p> 邊界:0;<p class="line number15 index14 alt2"><code class="html spaces"></code><code class="html plain"> :0;</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"></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></p>寬度：200px；<p class="line number20 index19 alt1"><code class="html spaces"></code><code class="html plain"></code></p>#高度：200px;############ ######背景：綠色;############ }############ #######.第二個{############ ######## ###### 寬度：200px;############ ## #######背景：紅色;############ ################20%；<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">#</code><code class="html plain">頭</code></p>><p class="line number23 index22 alt2"><code class="html plain"></code><code class="html keyword">#<code class="html plain">主題</code></code></p>
<p class="line number24 index23 alt1"><code class="html plain"> #></code><code class="html keyword"></code><code class="html plain"> </code></p>
<code class="html spaces"></code># <code class="html plain">class="first">寬200，無邊距</code><code class="html keyword">p</code><code class="html plain">></code><code class="html keyword"></code><code class="html plain"> </code><code class="html spaces">p</code> <code class="html plain">class="second">寬為200,margin-left為20%;</code><code class="html keyword">p</code><code class="html plain">#></code><code class="html keyword"></code><code class="html plain"></code>body<p class="line number27 index26 alt2"><code class="html plain">></code><code class="html keyword"></code><code class="html plain"></code></p>html<p class="line number28 index27 alt1"><code class="html plain">#> </code><code class="html keyword"></code><code class="html plain"></code></p>
<p> </p>
<p>這個範例中，設定兩個元素向左浮動，以便觀察兩者水平方向的margin。其中左邊p無margin，右邊p的margin-left為20%，效果如下：</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>#從效果圖可以看出兩個p之間的間距永遠為父元素（這裡右邊p的父元素即為body，其寬度為瀏覽器寬度）的20%。 </strong></p>
<p> </p>
<p> </p>
<h3> （2）同級元素在垂直方向上使用值為%的margin</h3>
<p> 根據例7的啟發，我們可以猜想，如果在垂直方向上使用margin，且值的單位為%,那麼最終兩者之間的距離將是父元素(上例中為body)的百分數。那麼究竟是不是這樣呢？看下面的例子。 </p>
<p><strong>範例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">
<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>##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">##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">head<code class="html plain"></code>><code class="html keyword"></code><code class="html plain"></code> </p>
<p class="line number2 index1 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 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"></code>style<code class="html plain"></code>><code class="html keyword"> </code><code class="html plain"></code>o 和# </p>
<p class="line number5 index4 alt2">#padding:0;<code class="html spaces"></code><code class="html plain"></code> ##o</p>#1 {<p class="line number6 index5 alt1"><code class="html spaces"></code><code class="html plain"> </code></p>width: 200px;<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">background:green;</code><code class="html plain"></code></p> <p class="line number9 index8 alt2">##.second{<code class="html spaces"></code></p>
<p class="line number15 index14 alt2"><code class="html spaces"> </code><code class="html plain">寬度：200px;</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">上邊界：10%;</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></p>
<p class="line number20 index19 alt1"><code class="html spaces"></code><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
<p class="line number21 index20 alt2"><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p>
<p class="line number22 index21 alt1"><code class="html plain"></code><code class="html keyword"></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"></code>頭<code class="html plain"></code>><code class="html keyword"></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"></code> <code class="html plain"></code><<code class="html keyword"></code>p<code class="html plain"># </code>class="first">高為200，無margin</</p> <p class="line number25 index24 alt2">p<code class="html plain"> </code>><code class="html keyword"></code><code class="html plain"></code> </p><p class="line number26 index25 alt1"><<code class="html plain"></code>p<code class="html keyword"> </code>class="第二個" >高為200,margin- top為20%;</<code class="html plain"></code>p</p></td>></tr></tbody></table>####</#### ##body######># ###########</######html######>########## #########<p>這裡設定上面的p無margin，下面的p的margin-top為10。效果如下：</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>#我們發現，當我在縮小瀏覽器的高度時，在垂直方向上的間距並沒有縮小！ ！ ！ 而當我縮小瀏覽器的寬度時，垂直方向上的距離就縮小了！ ！ ！ </strong></p><p><strong>這就說明：統計元素之間在垂直方向上使用margin，當值的單位為%時，它是相對於父元素的寬度。 </strong></p><p><strong> 那麼這裡為什麼不是如我們所希望的那樣相對於瀏覽器的高度呢？知乎上有大神是這樣解釋的（原文網址：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）父子元素使用值為%的margin</h3><p> <strong>對於父子元素，如果在在父子元素，如果在子元素中使用單位為%margin，那麼這個margin值是相對於父元素的寬度和高度（注意：這時的確是相對於父元素的高度！）的。 </strong></p><p> <strong>例9 </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"></p><p class="line number21 index20 alt2"></p><p class="line number22 index21 alt1"></p><p class="line number23 index22 alt2"></p><p class="line number24 index23 alt1"></p><p class="line number25 index24 alt2"></p><p class="line number26 index25 alt1"></p><p class="line number27 index26 alt2"></p><p class="line number28 index27 alt1"></p><p class="line number29 index28 alt2"></p> #20<p class="line number30 index29 alt1"></p>21<p class="line number31 index30 alt2"></p>22</td><td class="code">23<p class="container"><br/>#24</p><p class="line number1 index0 alt2">#25<code class="html plain"></code>#26<code class="html keyword"></code><code class="html plain"></code></p><p class="line number2 index1 alt1"><code class="html plain"></code><code class="html keyword"></code><code class="html plain"></code></p><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">## 27<code class="html spaces"></code>28<code class="html plain"></code>29<code class="html keyword"></code>30<code class="html plain"></code>#31</p><p class="line number5 index4 alt2"><code class="html spaces"></code><code class="html plain"></code><code class="html keyword"> </code><!<code class="html plain"></code>DOCTYPE<code class="html keyword"> </code>html><code class="html plain"></code></p>
<p class="line number6 index5 alt1">#<<code class="html spaces"></code>html<code class="html plain"> </code>#lang= "en"><code class="html keyword"></code><code class="html plain"></code><</p><p class="line number7 index6 alt2">head<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"></code>meta</p> <p class="line number9 index8 alt2">charset="UTF-8"><code class="html spaces"></code><code class="html plain"></code> </p>
<p class="line number10 index9 alt1">#<<code class="html spaces"></code><code class="html plain"></code></p>#####<##########################<##### ##title######>Document</######title#######>############ ######<# #####style######>############ #######*{############ ##margin:0;############ #######padding:0;############ # ###</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>
</td>
</tr></tbody></table></code></p>
</td>
</tr></tbody></table></code></p>
</td>
</tr></tbody></table></code></p>
</td>
</tr></tbody></table>
以上是深入理解css中的margin屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn