内边距（padding）

内边距（padding）

内边距（padding）属性用于设置内边距，是指边框与内容之间的距离。根据方位不同可分为四种：

当我们给盒子指定了内边距后， 会发生2件事情：

1. 内容和边框之间有了距离，添加了内边距。
2. 盒子会因为内边距的增加而被撑大了。

padding-top:10px

内边距的综合设置

内边距的综合设置遵循一定的规范，如下表：

例如：

padding：10px 20px 30px;

该例子设置了盒子上内边距为10像素，左内边距和右内边距为20像素，下内边距为30像素。

内盒尺寸计算（元素的实际大小）

• 盒子宽度 = 内容宽度 + 内边距 + 边框宽度
• 盒子高度 = 内容高度 + 内边距 + 边框高度

由于盒子会因为内边距的增加，而被撑大。在实际开发中要综合考虑内容宽度、内边距、边框对盒子宽度和高度的影响。

内边距不影响盒子大小情况

如果没有给一个盒子指定宽度， 此时，如果给这个盒子设置内边距，则不会撑开盒子。例如：

<style>
    div{
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
    p{
      height: 30px;
      background-color: red;
      padding-left: 30px;
    }
  </style>
...
  <div>
    <p>我是一段文本</p>
  </div>

实际效果为：

新浪网首页导航栏实例（注意内边距的设置）

点击查看【codepen】