大家好，我是IT修真院西安分院第二期學員，一枚正直善良的web程式設計師。

今天給大家分享一下，修真院官網CSS-1任務中可能會使用到的知識點：

1.背景介紹

什麼是MARGIN 什麼是PADDING
我們在進行網頁製作時都會遇到為元素設定邊距的情況，邊距又分為內邊距和外邊距，即margin和padding.
margin和padding是在html中的盒模型的基礎上出現的，

margin是盒子的外邊距，即盒子與盒子之間的距離，而padding是內邊距，是盒子的邊與盒子內部元素的距離。

2.知識剖析

MARGIN是什麼？
CSS 邊距屬性定義元素周圍的空間。通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設定

。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。——W3School

邊界，元素周圍生成額外的空白區。“空白區”

通常是指其他元素不能出現且父元素背景可見的區域。——CSS權威指南

PADDING是什麼？
padding 屬性設定元素的內邊距,屬性定義元素邊框與元素內容之間的空間。

同理padding可以稱之為“內邊距”，但是我又恰恰喜歡稱呼padding為“補白”或者“留白”

MARGIN的特性
margin始終是透明的。margin通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設定。即：margin-top、margin-right、margin-bottom、margin-left。
margin只有一個值表示上右下左，如果 margin 只有兩個值第一個值表示上下，第二個值為左右。
margin有三個值 表示上左右下，margin有四個值表示上下左右四個方向。

PADDING的特性

PADDING的特性

padding屬性設定元素所有內邊距的寬度，或者設定各邊上內邊距的寬度。

行內非替換元素上設定的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，

從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。

不允許指定負邊距值。

3.常見問題

1.什麼是盒子模型。
2.margin和padding的區別。

3.用margin好還是用padding好。

4.解決方案

什麼是盒子模型。

具備內容、填充、邊框、邊界這些屬性，能包含其他元素的容器都是盒子。

MARGIN和PADDING的區別。
我們以DIV為一個盒子為例，既然和現實生活中的盒子一樣，
那我們想一下，生活中的盒子內部是不是空的好用來存放東西，
而裡面存放東西的區域我們給他起個名字叫“content(內容)”，
而盒子的紙壁給他起個名字叫“border(邊框)”，如果盒子內部的東西比如是一塊硬碟
，但是硬碟怕震動，所以我們需要在硬碟的四周盒子的內部均勻填充一些防震材料，
這時硬碟和盒子的邊框就有了一定的距離了，我們稱這部分距離叫“padding(內邊距)”，
如果我們需要購買許多塊硬碟，還是因為硬碟怕震動所以需要在盒子和盒子之間也需要一些

防震材料來填充，那麼盒子和盒子之間的距離我們稱之為"margin(外邊距)"

用MARGIN好還是用PADDING好
何時應當使用margin：

需要在border外側新增空白時。 空白處不需要背景（色）時。 
上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，

將得到20px的空白。

何時應當時用padding：

，將得到35px的空白。

MARGIN在塊級元素
margin在塊級元素下，他的效能可以完全體現，上下左右任你設定.


MARGIN在行級元素
margin也能用於內聯元素，這是規範所允許的，
但是margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，

並且由於邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。

總結
margin屬性可以應用於幾乎所有的元素，除了表格顯示型別。

padding屬性的使用1.需要在border內測新增空白時。 2.空白處需要背景（色）時。

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
margin用於佈局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，

讓內容（文字）與（包裹）元素之間有一段“呼吸距離”。

5.程式碼實戰

margin水平邊距不合並

垂直margin可合併

6.拓展思考

什麼是MARGIN摺疊？
在CSS中，兩個或以上的塊元素（可能是兄弟，也可能不是）
之間的相鄰外邊距可以被合併成一個單獨的外邊距。通過此方式合併的外邊距被稱為摺疊，
且產生的已合併的外邊距被稱為摺疊外邊距。 處於同一個塊級上下文中的塊元素，沒有行框、

沒有間隙、沒有內邊距和邊框隔開它們，這樣的元素垂直邊緣毗鄰，則稱之為相鄰。

7.參考文獻

參考一： margin的詳細用法
參考二： 怎麼區分margin 和 padding的區別。
參考三 盒子模型知多少

參考四 margin為負值產生的影響和常見佈局應用

8.更多討論

1.如何利用margin達到，垂直居中的效果。

2.如何理解margin的重疊，具體應用。

3.2個垂直的盒子一個外底邊距為15px,一個外頂邊距為20px，合併之後為多少。