CSS 盒子模型（Box model）中的 padding 与 margin
編輯自 http://www.x6x8.com/IT/199.HTML
本文將講述 HTML 和 CSS 的關鍵—盒子模型 (Box model) 。理解 Box model 的關鍵便是 margin 和 padding 屬性，而正確理解這兩個屬性也是學習用 CSS 布局的關鍵。
如果有一點HTML基礎的話，就應該了解一些基本元素 (Element)，如 p，h1~h6，br，div，li，ul，img 等. 如果將這些元素細分，又可以分別歸為頂級 (top-level) 元素，塊級 (block-level) 元素和內聯 (inline) 元素。
塊級元素是構成一個 HTML 的主要和關鍵元素，而任意一個塊級元素均可以用 Box model 來解釋說明。
Box Model
Box Model: 任意一個塊級元素均由 content(內容)，padding，background(包括背景顏色和圖片)，border(邊框)，margin 五個部分組成. 立體圖如下(Fig. 1):
該立體圖引自:http://www.hicksdesign.co.uk/ (Under?the Creative Commons License)
平面圖如下(Fig. 2):
根據以上兩圖，相信大家對于 Box model 會有個直觀的認識。
Margin&Padding
- Margin: 包括 margin-top，margin-right，margin-bottom，margin-left，控制塊級元素之間的距離，它們是透明不可見的，對于 Fig. 2 所示的上右下左 margin 值均為 40px，因此代碼為：
根據上、右、下、左的順時針規則，簡寫為
margin: 40px 40px 40px 40px;為便于記憶，請參考下圖:
當上下，左右 margin 值分別一致，可簡寫為:
margin: 40px 40px;前一個40px代表上下 margin 值，后一個 40px 代表左右 margin 值。
當上下左右 margin 值均一致，可簡寫為:
margin: 40px;- Padding: 包括padding-top，padding-right，padding-bottom，padding-left，控制塊級元素內部，content 與 border 之間的距離，其代碼，簡寫請參考margin屬性的寫法。
至此，我們已經基本了解 margin 和 padding 屬性的基本用法。但是，在實際應用中，卻總是發生一些讓你琢磨不透的事，而它們又或多或少的與 margin 有關。
注: 當你想讓兩個元素的 content 在垂直方向 (vertically) 分隔時， 既可以選擇 padding-top/bottom，也可以選擇 margin-top/bottom， 再此 Jorux 建議你盡量使用 padding-top/bottom 來達到你的目的，這是因為 CSS 中存在 Collapsing margins (折疊的 margins )的現象。
Collapsing margins: margins 折疊現象只存在于臨近或有從屬關系的元素，垂直方向的margin中. 文字說明可能讓人費解，下面用一個例子說明 margin-collapsing 現象。
例: 在HTML文件的<body></body>之間寫入如下代碼:
<div id=”ID1″> <h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1與ID2的margins在垂直方向折疊。</h1> </div>在與其外聯的CSS文件中寫入:
1 * { 2 padding:0; 3 margin:0; 4 } 5 #ID1 { 6 background-color: #333; 7 color: #FFF; 8 margin-top: 10px; 9 margin-bottom: 10px; 10 } 11 #ID2 { 12 font: normal 14px/1.5 Verdana，sans-serif; 13 margin-top: 30px; 14 margin-bottom: 30px; 15 border: 1px solid #F00; 16 }代碼解釋:
在HTML寫入的代碼表示，在 HTML 中插入 id 分別為 ID1 和 ID2 的兩個塊級元素 div，h1 。
依據以上解釋，我們應該得到如下效果(Fig. 3):
即 ID1 的 margin-top/bottom=ab=ef=10px;
ID2 的margin-top/bottom=bc=de=30px;
但用瀏覽器打開 HTML 文件，卻得到 Example4 的效果，如下圖(Fig. 4):
即 ab=cd=30px，ID1 的 margin-top/bottom=10px 被折疊了，而且 ID1 應有的 margin 黑色背景也一同被折疊消失了.
為什么會折疊: 造成以上現象的原因是， 我們在 CSS 中并沒有聲明 id 為 ID1 的元素 div 的 height (高)，因此它的高便被設為 auto (自動)了. 一旦其值被設為 auto， 那么瀏覽器就會認為它的高為子元素 ID2 的 border-top 到 border-bottom 之間的距離，即Fig. 4中bc的長度， 所以子元素 ID2 的 margin-top/bottom(30px) 就伸出到了父元素 ID1 之外，出現了 Fig. 4 中 ab 與 cd 之間的空白區域. 因此父元素ID1的 margin-top/bottom 因子元素的”紅杏出墻”而被折疊消失了.
如何解決折疊問題: 可能大家最初想到的辦法就是根據折疊發生的原因——auto，來解決問題. 但是，在實際操作中，某些元素如 div、h1、p 等，我們是不可能預先知道它的高是多少的，因此在 CSS 文件中是不能常規通過聲明元素的高來解決折疊問題.
我們需要在 CSS 文件中加入如下代碼（下劃線部分）:
#ID1 { background-color: #333; color: #FFF; margin-top: 10px; margin-bottom: 10px; padding-top:1px;padding-bottom:1px;}
或是：
#ID1 { background-color: #333; color: #FFF; margin-top: 10px; margin-bottom: 10px; border-top:1px solid #333;border-bottom:1px solid #333; }通過增加以上代碼，便可使瀏覽器重新計算 ID1 的高，使其為子元素 ID2 的 margin-top/bottom 外緣 (outer top/bottom) 之間的距離，即 Fig.?3 中 be 的距離。
轉載于:https://www.cnblogs.com/RhinoC/p/4471159.html
總結
以上是生活随笔為你收集整理的CSS 盒子模型（Box model）中的 padding 与 margin的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WPF学习12：基于MVVM Light
- 下一篇： Lua-简洁、轻量、可扩展的脚本语言