正文

margin 算是性格剛烈的屬性了，下面，我將從各個方面講解 margin 的可怕之處。

元素尺寸的影響

通常一個元素的尺寸可分為：可視尺寸 與 占據尺寸

1. 可視尺寸 - clientWidth (border - padding - size)

2. 占據尺寸 - outerWidth (border - margin)

margin 又是怎樣影響這兩個尺寸的呢？

首先，兩個尺寸都需滿足一定的條件。

可視尺寸的影響條件

1. 適用于 沒有設定 width/height 的塊級元素 (寬高設死了，怎么會影響呢？)
   其中不包括 float absolute fixed 元素 ，inline水平 ，table-cell 元素

2. 只適用于水平方向尺寸（margin-left/margin-right）

占據尺寸的影響條件

1. 適用于 block/inline-block 水平元素

2. 適用于 任何方向

3. 與 width/height 值無關

4. inline 元素只影響水平方向 (后面會提到)

影響示例

1. margin 影響元素的可視水平尺寸
   margin的可視尺寸示例

2. margin 影響占據尺寸 ，這個可以說是 margin 的本命技能了，就不舉例了。

百分比單位

通常而言，margin 的單位中，百分比單位最容易讓人頭暈。

1. 普通元素的百分比 margin 都是相對于 容器的寬度 計算的

   <style>
     #parent {
     margin: 20px 400px;
     width: 100px;
     height: 200px;
   }
   #child {
     
     margin: 5% 10%;
     
     width: 50%; 
     
     height: 50%;
   }
   </style>
   <p id="parent">
     <p id="child"></p>
   </p>

2. 絕對定位的百分比 margin 是相對于 第一個具有定位屬性的祖先元素的寬度 計算的(relative/absolute/fixed)

   <style>
     #parent {
     width: 100px;
   }
   #child {
     
     position:absolute; 
     
     margin: 5% 10%;
   }
   </style>
   <p id="parent">
     <p id="child"></p>
   </p>

重疊詳解

重疊可謂是 margin 中的最重要的潛規(guī)則了。

發(fā)生情景

1. 相鄰的兄弟元素

2. 父級和第一個/最后一個子元素

3. 空的塊級元素（自己和自己）

重疊條件

1. 塊級元素 （不包括 float 和 absolute 元素）

2. 不考慮 writing-mode，只發(fā)生在垂直方向 （margin-top/margin-bottom）

3. 父子 重疊條件

• margin-top 重疊

• margin-bottom 重疊

1. 父元素 非格式化上下文元素 沒有設置 overflow:hidden

2. 父元素沒有 border-bottom 設置

3. 父元素沒有 padding-bottom 設置

4. 父元素和第一個子元素之間沒有inline元素分割

5. 父元素沒有 height ，min-height，max-height 限制

6. 父元素 非格式化上下文元素 沒有設置 overflow:hidden

7. 父元素沒有 border-top 設置

8. 父元素沒有 padding-top 設置

9. 父元素和第一個子元素之間沒有inline元素分割

4. 空的塊級元素 margin 重疊條件

   1. 元素沒有 border 設置
   2. 元素沒有 padding 設置
   3. 里面沒有 inline 元素
   4. 沒有 height，或者 min-height

計算規(guī)則

1. 正正取大值

   <style>
   #top{
     margin-top:30px;
   }
   #bottom{
     margin-bottom:20px;
   }
   </style>
   <p id="bottom"></p>
   <p id="top"></p>
   兩個元素垂直距離為 : #top元素的 margin-top值

2. 正負值相加

   <style>
    #top{
     margin-top:-30px;
   }
   #bottom{
     margin-bottom:20px;
   }
   </style>
   <p id="bottom"></p>
   <p id="top"></p>
   兩個元素垂直距離為: #top元素的margin-top值 加上 #bottom元素的margin-bottom值

3. 負負最負值

   <style>
   #top{
     margin-top:-30px;
   }
   #bottom{
     margin-bottom:-20px;
   }
   </style>
   <p id="bottom"></p>
   <p id="top"></p>
   兩個元素垂直距離為 : #top元素的 margin-top值

4. 父級和第一個/最后一個子元素 發(fā)生重疊
   給子元素設置垂直方向的 margin ，等同于 給父元素設置相同的垂直方向的 margin 屬性，
   也就是說 父子元素發(fā)生 margin 重疊時， 它們倆共用一個 margin 屬性

重疊意義

• 連續(xù)段落或列表之類，如果沒有margin重疊，排版會不自然。

• 頁面中任何地方，嵌套或直接放入任何空的 p，都不會影響原來的布局。

• 遺落空的任意多個 p 元素，不會影響原來的閱讀排版。

margin auto

當你使用 margin auto 時，就應該聯想到一個詞 ：填充

一個沒有設置寬高的塊級元素，會自動填充寬度

如果 一側是定值，一側是 auto，則 auto 為剩余空間的大小

如果兩側均是 auto，則平分 剩余空間

示例如下：

<style>
#demo{
  width: 500px;
  margin-right:100px;
  
  margin-left:auto;
}
</style>
<p id="demo"></p>

margin:auto 0 !== 垂直居中

以上，我們可得當一個塊級元素設置了 margin: 0 auto 可以實現水平居中，

而為什么 margin:auto 0 不會垂直居中？

答：一個塊級元素會自動填充可用的水平尺寸，但不會填充垂直尺寸，是因為其根本沒有任何可用的垂直空間。也就是說 margin: 0 auto , 總是有尺寸可以來填充的！ 而 margin: auto 0 是沒有任何尺寸的可以來填充的。

失效情況

當子元素的寬度大于父元素的寬度 ，是無法通過 margin: 0 auto 實現居中的
因為，這個時候已經沒有任何空間可以填充了，當寬度超出父元素時，margin 已經為負值了。

垂直居中

1. writing-mode 與垂直居中

   <style>
   .father{
     writing-mode: vertical-lr;
   }
   .son{
     margin: auto;
   }
   </style>
   <p class="father">
     <p class="son"></p>
   </p>

2. 絕對定位元素

   <style>
   .parent{
     position: relative;
   }
   .child{
     position: absolute;
     top: 0; bottom: 0; left: 0; right: 0;
     margin:auto;
   }
   </style>
   <p class="parent">
     <p class="child"></p>
   </p>

失效情景

1. inline 水平元素的垂直margin 無效（margin-top/margin-bottom）

2. margin 重疊發(fā)生

3. 絕對定位元素非定位方位的 margin值 "無效"
   因為 絕對定位元素 脫離了文檔流，與相鄰元素沒有關系，所以它不可能像普通元素一樣，設置margin，推走其他元素

4. margin 鞭長莫及
   因為 有某些元素破壞了 文檔流，設置了 float absolute，造成了假象，margin不會根據 這些破壞元素作為標準

5. display:table-cell/display:table-row 等聲明的margin無效！某些替換元素除外，根據各個瀏覽器的實現方式作為區(qū)分。比如，給 button 元素聲明 display:table-cell，但在 chrome 中,button 的 display 屬性是 inline-block 。

6. 內聯特性導致 margin 失效
   margin-top: 負無窮， 但是，小到 1em 便無效了。
   因為它是內聯元素，默認是基線對齊，x字母下邊緣對齊，margin 值再大，也不會起作用。
   margin負無窮情景解析

其他屬性

1. margin-start

• 正常流向，margin-start 等同于 margin-left，兩者重疊不相加

• 如果水平流向是從右向左，margin-start 等同于 margin-right

• 在垂直流下 ( writing-mode:vertical-*; ) margin-start 等同于 margin-top

2. margin-end 與 margin-start 相對

3. margin-before 默認情況等同于 margin-top

4. margin-after 默認情況等同于 margin-bottom

5. margin-collapse

• margin-collapse:collapse;

  (默認值) 發(fā)生重疊

• margin-collapse:discard;

  取消重疊，margin 重疊部分為 0 ，沒有margin

• margin-collapse:separate;

  不發(fā)生重疊，margin 重疊部分為 margin-top + margin-bottom

相關推薦：

淺談margin負值的作用

詳解CSS中margin和padding的區(qū)別

CSS的margin有什么作用

以上就是css之margin屬性詳解的詳細內容，更多請關注php中文網其它相關文章！