margin:外邊距

padding:內(nèi)邊距

相關(guān)代碼

樣式

上面代碼在google瀏覽器的樣子

（1）padding-left:10px;左內(nèi)邊距

（2）padding-right:10px;右內(nèi)邊距

（3）padding-top:10px;上內(nèi)邊距

（4）padding-bottom:10px;下內(nèi)邊距

（5）padding：10px;四邊統(tǒng)一內(nèi)邊距

（6）padding:10px 20px;上下、左右內(nèi)邊距

（7）padding:10px 20px?30px;上熔萧、左右审轮、下內(nèi)邊距

（8）padding:10px 20px 30px?40px;上叁怪、右、下、左內(nèi)邊距

（1）margin-left:10px;左外邊距

（2）margin-right:10px;右外邊距

（3）margin-top:10px;上外邊距

（4）margin-bottom:10px;下外邊距

（5）margin:10px;四邊統(tǒng)一外邊距

（6）margin:10px 20px;上下、左右外邊距

（7）margin:10px 20px 30px;上粉臊、左右、下外邊距

（8）margin:10px 20px 30px 40px;上驶兜、右扼仲、下、左外邊距

盒模型

把所有網(wǎng)頁上的對像都放在一個盒(box)中抄淑，設(shè)計師可以通過創(chuàng)建定義來控制這個盒的屬性犀盟，這些對像包括段落、列表蝇狼、標題、圖片以及層倡怎。盒模型主要定義四個區(qū)域：內(nèi)容(content)迅耘、內(nèi)邊距(padding)贱枣、邊框(border)和外邊距(margin)。對于初學者颤专，經(jīng)常會搞不清楚margin纽哥，background-color，background-image栖秕，padding春塌，content，border之間的層次簇捍、關(guān)系和相互影響只壳。下面是盒模型的3D示意圖，便于理解和記憶暑塑。

margin：層的邊框以外留的空白

background-color：背景顏色

background-image：背景圖片

padding：層的邊框到層的內(nèi)容之間的空白

border：邊框

content：內(nèi)容

接下來將講述HTML和CSS的關(guān)鍵——盒子模型(Box model)吼句。理解Box model的關(guān)鍵便是margin和padding屬性，而正確理解這兩個屬性也是學習用css布局的關(guān)鍵事格。

注: 為什么不翻譯margin和padding?

原因一: 在漢語中并沒有與之相對應(yīng)的詞語惕艳；

原因二: 即使有這樣的詞語, 由于在編寫css代碼時, 必須使用margin和padding, 如果我們總用漢語詞語代替其來解釋的話, 到了實際應(yīng)用時容易混淆margin和padding的概念。

如果有一點Html基礎(chǔ)的話驹愚，就應(yīng)該了解一些基本元素(Element)远搪，如p、h1~h6逢捺、br谁鳍、div、li蒸甜、ul棠耕、img等。如果將這些元素細分柠新，又可以分別為頂級(top-level)元素窍荧、塊級(block-level)元素和內(nèi)聯(lián)(inline)元素。

塊級元素是構(gòu)成一個html的主要和關(guān)鍵元素恨憎，而任意一個塊級元素均可以用Box model來解釋說明蕊退。

Box Model: 任意一個塊級元素均由content(內(nèi)容)、padding憔恳、background(包括背景顏色和圖片)瓤荔、border(邊框)、margin五個部分組成钥组。

立體圖

平面圖

根據(jù)以上兩圖输硝，相信大家對于Box model會有個直觀的認識。

以下說明margin和padding屬性:

1程梦、margin: 包括margin-top点把、margin-right橘荠、margin-bottom、margin-left郎逃，控制塊級元素之間的距離哥童，它們是透明不可見的。根據(jù)上褒翰、 右贮懈、下、左的順時針規(guī)則优训，可以寫為 margin: 40px 40px 40px 40px;

分析

當上下朵你、左右margin值分別一致, 可簡寫為:

margin: 40px 40px;

前一個40px代表上下margin值，后一個40px代表左右margin值型宙。

當上下左右margin值均一致撬呢，可簡寫為:

margin: 40px;

2、Padding: 包括padding-top妆兑、padding-right魂拦、padding-bottom、padding-left搁嗓，控制塊級元素內(nèi)部芯勘，content與border之間的距離，其代碼腺逛，簡寫請參考margin屬性的寫法荷愕。

至此，我們已經(jīng)基本了解margin和padding屬性的基本用法棍矛。但是安疗，在實際應(yīng)用中，卻總是發(fā)生一些讓你琢磨不透的事够委，而它們又或多或少的與margin有關(guān)荐类。

注: 當你想讓兩個元素的content在垂直方向(vertically)分隔時，既可以選擇padding-top/bottom茁帽，也可以選擇margin-top/bottom玉罐，再此Ruthless建議你盡量使用padding-top/bottom來達到你的目的，這是因為css中存在Collapsing margins(折疊的margins)的現(xiàn)象潘拨。

Collapsing margins: margins折疊現(xiàn)象只存在于臨近或有從屬關(guān)系的元素吊输，垂直方向的margin中。

詳細說明如下：

如果只提供一個铁追，將用于全部的四條邊季蚂；

如果提供兩個，第一個用于上－下，第二個用于左－右扭屁；

如果提供三個透硝，第一個用于上，第二個用于左－右疯搅，第三個用于下；

如果提供全部四個參數(shù)值埋泵，將按上－右－下－左的順序作用于四邊幔欧。

body { padding: 36px;} //對象四邊的補丁邊距均為36px

body { padding: 36px 24px; } //上下兩邊的補丁邊距為36px，左右兩邊的補丁邊距為24px

body { padding: 36px 24px 18px; } //上丽声、下兩邊的補丁邊距分別為36px礁蔗、18px，左右兩邊的補丁邊距為24px

body { padding: 36px 24px 18px 12px; } //上雁社、右浴井、下、左補丁邊距分別為36px霉撵、24px磺浙、18px、12px