什麼時候用Margin？什麼時候用Padding？

● 兩種盒子模型

$~~~~$標準盒模型

塊的總寬度=width+margin(左右)+padding(左右)+border(左右)
$~~~~$

width=content

______________________________________________________________________________________

$~~~~$IE盒模型（怪異盒）

塊的總寬度=width+margin(左右)（width包含了padding和border)
$~~~~$

左側爲標準盒 右側是怪異盒

$~~~~$

● margin 與 padding 的用法

$~~~~$何時用margin

$~~~~~~~~$1.需要在border外側添加空白時。
$~~~~~~~~$2.空白處不需要背景（色）時。
$~~~~~~~~$3.上下相連的兩個盒子之間的空白，需要相互抵消時。
$~~~~~~~~~~~~~$如:15px + 20px的margin，將得到20px的空白。

$~~~~$何時用padding

$~~~~~~~~$1.需要在border內測添加空白時。
$~~~~~~~~$2.空白處需要背景（色）時。
$~~~~~~~~$3.上下相連的兩個盒子之間的空白，希望等於兩者之和時。
$~~~~~~~~~~~~~$如"15px + 20px的padding，將得到35px的空白。

$~~~~$

總結：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於佈局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“呼吸距離”。