一、什么是內(nèi)邊距

內(nèi)邊距處于父元素和子元素之間，設(shè)置在父元素上，可以理解成物品和盒子中間塞的那層泡沫塑料，使用padding屬性。

圖1-1 綠色部分為內(nèi)邊距

二、屬性設(shè)置

1. 單獨(dú)寫(xiě)法：

padding-top: 上內(nèi)邊距
padding-right: 右內(nèi)邊距
padding-left: 左內(nèi)邊距
padding-bottom: 下內(nèi)邊距

2. 復(fù)合寫(xiě)法

padding后面可跟多個(gè)值，中間用空格分離，含義如下：

padding:（一個(gè)值）上下左右內(nèi)邊距均為這個(gè)值
padding:（兩個(gè)值）第一個(gè)值為上下內(nèi)邊距，第二個(gè)值左右內(nèi)邊距
padding:（三個(gè)值）第一個(gè)值為上內(nèi)邊距，第二個(gè)值為左右內(nèi)邊距，第三個(gè)值為下內(nèi)邊距。
padding:（四個(gè)值）第一個(gè)值為上內(nèi)邊距，第二個(gè)值為右內(nèi)邊距，第三個(gè)值為下內(nèi)邊距，第四個(gè)值為左內(nèi)邊距。（從上開(kāi)始順時(shí)針轉(zhuǎn)一圈）

三、使用示例

1、簡(jiǎn)單示例

我們放置一個(gè)寬高為200px的紅色大盒子，其中包著一個(gè)寬高為100px的粉色小盒子。

    <div class="d1">
        <div class="d2"></div>
    </div>

圖3-1 設(shè)置內(nèi)邊距前

我們給大盒子設(shè)置一個(gè)內(nèi)邊距為50px。

        .d1{
            background: red;
            width:200px;
            height:200px;
            padding-left: 50px;
        }

圖3-2 設(shè)置內(nèi)邊距后

我們會(huì)發(fā)現(xiàn)給父元素設(shè)置了一條左內(nèi)邊距后，它的寬度也被撐大了，這顯然不是我們想要的效果，解決方法就是如果加了左內(nèi)邊距，就把父元素寬度縮小相應(yīng)長(zhǎng)度，比如我們剛剛增加了50px的左內(nèi)邊距，就把父元素寬度從200px變?yōu)?50px，就能達(dá)到效果啦，其它方向也是一樣的，比如加了上內(nèi)邊距就縮小高度。

圖3-3 調(diào)整父元素寬度后

2、利用內(nèi)邊距繪制一些特殊圖案：

下圖就可以理解成一個(gè)盒子里面套了一個(gè)列表，中間有內(nèi)邊距：

圖3-2-1 示例圖片

我們?cè)賮?lái)看下面這個(gè)圖案，由三個(gè)盒子和內(nèi)邊距繪制而成。
（盒子就可以替換成其它各種塊元素，比如上圖里面就是列表）

圖3-2-2 內(nèi)邊距繪制圖案

html：

    <div class="d1">
        <div class="d2">
            <div class="d3"></div>
        </div>
    </div>

css：

        .d1{
            background: red;
            width:150px;
            padding: 100px 50px 100px;
        }
        .d2{
            background: orange;
            padding:50px;
        }
        .d3{
            background: yellow;
            height:100px;
        }

可以看到我省略了很多寬高。
（1）由于塊元素默認(rèn)寬度占一整行，高度由內(nèi)容撐開(kāi)，我們很多時(shí)候可以只給最外面的元素設(shè)置寬度，最內(nèi)部的元素設(shè)置高度，其它省略，也能達(dá)到效果。
如圖3-2-1中，我們只需要提供每個(gè)列表元素<li>的高度和外面大盒子的寬度即可，其它用內(nèi)邊距撐起或擠出。

（2）最終的高度和內(nèi)部元素的寬度都是由最外元素寬度、最內(nèi)元素高度和所有內(nèi)邊距撐起或者擠出來(lái)的。
如圖3-3-2中：
中間橙色盒子的寬度=紅色大盒子的寬度-紅色大盒子的左右內(nèi)邊距
紅色大盒子的高度=黃色小盒子的高度+橙色中盒子的上下內(nèi)邊距+紅色大盒子的上下內(nèi)邊距。

四、注意事項(xiàng)

以上操作僅針對(duì)塊元素，對(duì)于內(nèi)聯(lián)元素，左右內(nèi)邊距是可以正常使用的，而上下內(nèi)邊距只能延伸背景顏色，并不會(huì)把子元素?cái)D到中間。

圖4-1 原本的內(nèi)聯(lián)元素span

圖4-2 設(shè)置左右內(nèi)邊距后

圖4-3 設(shè)置上下內(nèi)邊距后

• 相關(guān)文章
  【css】邊框border的屬性和使用方法
  http://www.itdecent.cn/p/12f9bc926055
  【css】外邊距margin的屬性和使用方法
  http://www.itdecent.cn/p/6b4592b64f1b