● 两种盒子模型

$~~~~$    标准盒模型

块的总宽度=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用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。