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