1、頁面中間距的設(shè)置————margin、padding。

2、 間距在盒子外面時————外間距：用margin;

間距在盒子里面時————內(nèi)間距、填充、補白：用padding。

**************************************************

3、margin————

使用場景：頁面中需要設(shè)置間距，且該間距對于容器來說時外面的時候用。

用 法：

a、單獨設(shè)置：

外上間距：margin-top

外下間距：margin-bottom

外左間距：margin-left

外右間距：margin-right

b、用法1簡寫：

四個值：上、右、下、左 ——> {margin: 30px 50px 10px 20px;}

三個值：上、左右、下?——>?{margin: 10px 20px 30px;}

兩個值：上下、左右??——>?{margin: 30px 60px;}

一個值：四邊一樣???——>?{margin: 30px;}

c、用法2：

margin：0 auto；??//一個有寬度的元素（盒子）在瀏覽器中橫向劇中。

margin屬性值為auto時，暫時只支持左右，上下無效。

margin的屬性值可以給負數(shù)。比如有上下兩個盒子a、b，先給a設(shè)置margin-top：30px；因為頂部要有30x的間距，所以ab會都向下移30px；那么此時如果給b設(shè)置一個margin-top：-50px；b會向上移50px（即反向移動）。詳細例子見4-2 margin的auto與負數(shù)用法.html。

d、注意點：margin-top的傳遞問題。詳細見4-3

問題一：

默認情況下給子元素添加了margin-top；之后，瀏覽器解析的時候，會把這個上間距也傳遞給父元素，導(dǎo)致父元素也會下來。

解決方法： a、給最近的父元素添加border-top；

b、給父元素添加over-flow：hidden；?//溢出隱藏

問題二：

默認情況下，2個上下相鄰的盒子，給一個盒子添加了margin-top，另外一個盒子添加margin-bottom之后，這兩個垂直的間距會重疊，顯示最大數(shù)值的間距。

解決方法： a、給下面的盒子添加父元素，且添加聲明over-flow：hidden；

******************************************************

5、padding————：

使用場景：頁面中需要設(shè)置間距，且該間距對于容器來說是里面的時候用。

用 法：

a、單獨設(shè)置：

內(nèi)上間距：padding-top

內(nèi)下間距：padding-bottom

內(nèi)左間距：padding-left

內(nèi)右間距：padding-right

b、用法簡寫：

四個值：上、右、下、左 ——> {padding: 30px 50px 10px 20px;}

三個值：上、左右、下?——>?{padding: 10px 20px 30px;}

兩個值：上下、左右??——>?{padding: 30px 60px;}

一個值：四邊一樣???——>?{padding: 30px;}

c、padding沒有auto和負數(shù)的寫法。

d、 注??意：padding是添加在盒子大小之上的，所以會把盒子給撐大。

解決辦法：從寬度或者高度上減去添加的padding值。