CSS填充和宽高详解

CSS 中的填充（padding）和宽高（width/height）属性，是页面布局的基本功。很多新手容易搞混它们之间的关系，尤其是当内填充和宽高同时作用时，元素的实际渲染尺寸往往和预期不太一样。下面咱们就通过一个具体的例子，把这两个属性彻底理清楚。

还是回到这个经典案例：每个区块除了有外边距（margin），还有内容周围的空间（padding）以及内容本身的宽高设置。这里的关键在于，填充（padding）指的是边框内侧到内容之间的空白区域，它可以通过四个方向分别控制：padding-top、padding-right、padding-bottom、padding-left。

这些属性可以接受哪些值呢？常见的取值有：

• length —— 以 px、pt、cm 等固定单位指定，比如 10px、24pt、0.5cm。
• % —— 以父元素宽度的百分比指定，比如 10%。

注意，length 和百分比都可以取负值，负值会减少内部填充的空间——这种情况不常用，但需要知道它存在。

动手试试看。先创建一个文件夹 018-css-padding-width-height，在里面新建 padding-width-height.html 和 mystyle.css 两个文件。打开 HTML 文件，构建基础代码，引入外部样式表，然后添加一个 div 元素，填入一些文本。

接着打开 mystyle.css，定义 div 选择器，声明以下样式：

div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

在浏览器中查看效果，打开开发者工具的 Styles 面板，点击容器布局示意图的 padding 区域，四个方向的内填充值会清晰显示出来。

当然，更常见的做法是使用简写属性 padding 一次性指定所有方向的值。简写规则如下：

• 四个值：padding: 25px 50px 75px 100px; —— 上、右、下、左（顺时针顺序）。
• 三个值：padding: 25px 50px 75px; —— 上、左右、下。
• 两个值：padding: 25px 50px; —— 上下、左右。
• 一个值：padding: 25px; —— 所有方向相同。

把刚才的代码注释掉，改用简写方式：padding: 50px 30px 50px 80px;。刷新页面，效果完全一样！

接下来要特别注意一个问题：当一个元素设置了固定的宽度，那么添加在它上面的填充（padding）会直接叠加到元素的总宽度上。换句话说，width 属性只定义内容区域的宽度，不包括 padding、border 和 margin。

验证一下。在 HTML 中添加一个 h1 标签，填入一些文本。在 CSS 中定义 h1 选择器，把之前 div 的边框和背景样式复制过来，再给它加上 width: 300px。同时给 div 也加上 width: 300px。

h1 {
  width: 300px;
  border: 1px solid black;
  background-color: lightblue;
}

div {
  width: 300px;
  border: 1px solid black;
  background-color: lightblue;
  /* padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px; */
  padding: 50px 30px 50px 80px;
}

看效果：h1 的宽度是 300 + 左右边框2px = 302px；而 div 的宽度是 300（内容） + 左填充80px + 右填充30px + 左右边框2px = 412px。差距一目了然。

宽度与高度属性

最后来看 width 和 height 属性。它们用于设置元素内容区域的尺寸，不包含 margin、border 和 padding。可以接受的值有：

• auto —— 默认值，浏览器自动计算。
• length —— 固定单位，如 200px、30cm。
• % —— 相对于父元素宽度的百分比，如 20%。
• initial —— 重置为默认值，效果等同于 auto。

举个例子，把 div 的宽度改为 50%，刷新后可以看到，内容区域的宽度正好是当前页面宽度的一半。但要注意，此时 div 容器的总宽度依然大于页面宽度的 50%，因为左右填充和边框仍然会叠加上去。

理解了这个逻辑，布局时就不会被“盒模型”搞晕了。记住一句话：width 和 height 只管内容区，padding 和 border 永远会往外撑。