一、什么是内边距
内边距处于父元素和子元素之间，设置在父元素上，可以理解成物品和盒子中间塞的那层泡沫塑料，使用padding属性。
图1-1 绿色部分为内边距
二、属性设置
1. 单独写法：
padding-top: 上内边距
padding-right: 右内边距
padding-left: 左内边距
padding-bottom: 下内边距
2. 复合写法
padding后面可跟多个值，中间用空格分离，含义如下：
padding:（一个值）上下左右内边距均为这个值
padding:（两个值）第一个值为上下内边距，第二个值左右内边距
padding:（三个值）第一个值为上内边距，第二个值为左右内边距，第三个值为下内边距。
padding:（四个值）第一个值为上内边距，第二个值为右内边距，第三个值为下内边距，第四个值为左内边距。（从上开始顺时针转一圈）
三、使用示例
1、简单示例
我们放置一个宽高为200px的红色大盒子，其中包着一个宽高为100px的粉色小盒子。
<div class="d1">
<div class="d2"></div>
</div>
图3-1 设置内边距前
我们给大盒子设置一个内边距为50px。
.d1{
background: red;
width:200px;
height:200px;
padding-left: 50px;
}
图3-2 设置内边距后
我们会发现给父元素设置了一条左内边距后，它的宽度也被撑大了，这显然不是我们想要的效果，解决方法就是如果加了左内边距，就把父元素宽度缩小相应长度，比如我们刚刚增加了50px的左内边距，就把父元素宽度从200px变为150px，就能达到效果啦，其它方向也是一样的，比如加了上内边距就缩小高度。
图3-3 调整父元素宽度后
2、利用内边距绘制一些特殊图案：
下图就可以理解成一个盒子里面套了一个列表，中间有内边距：
图3-2-1 示例图片
我们再来看下面这个图案，由三个盒子和内边距绘制而成。
（盒子就可以替换成其它各种块元素，比如上图里面就是列表）
图3-2-2 内边距绘制图案
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）由于块元素默认宽度占一整行，高度由内容撑开，我们很多时候可以只给最外面的元素设置宽度，最内部的元素设置高度，其它省略，也能达到效果。
如图3-2-1中，我们只需要提供每个列表元素<li>的高度和外面大盒子的宽度即可，其它用内边距撑起或挤出。
（2）最终的高度和内部元素的宽度都是由最外元素宽度、最内元素高度和所有内边距撑起或者挤出来的。
如图3-3-2中：
中间橙色盒子的宽度=红色大盒子的宽度-红色大盒子的左右内边距
红色大盒子的高度=黄色小盒子的高度+橙色中盒子的上下内边距+红色大盒子的上下内边距。
四、注意事项
以上操作仅针对块元素，对于内联元素，左右内边距是可以正常使用的，而上下内边距只能延伸背景颜色，并不会把子元素挤到中间。
图4-1 原本的内联元素span
图4-2 设置左右内边距后
图4-3 设置上下内边距后
-
相关文章
【css】边框border的属性和使用方法
//www.greatytc.com/p/12f9bc926055
【css】外边距margin的属性和使用方法
//www.greatytc.com/p/6b4592b64f1b
