---
title: "CSS单元格式框的属性"
url: "https://yjyj.net/learn/3832.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2005-12-17T05:35:07+08:00"
updated_at: "2005-12-17T05:35:07+08:00"
categories: "招数学习"
tags: "CSS布局技巧, 前端开发实战, 网页视觉设计"
summary: "这篇文章系统讲清 CSS 单元格式框的三大核心属性：width/height、padding、border，重点解释它们的取值规则、默认值、简写写法，以及哪些格式单元能用、哪些不能用。读完你能快速判断盒模型各层空间如何影响布局，避免固定尺寸导致内容溢出或排版失真。"
source: "生猛大蝦 (https://yjyj.net)"
---

# CSS单元格式框的属性

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/3832.html) · 作者：小 虾 · 发布时间：2005-12-17

## 30 秒核心看点 (TL;DR)

- width 和 height 主要控制内边缘框大小，但并非所有行间单元都能直接设置。
- padding 是内容周围的缓冲区，支持四边单独写，也能用简写一次定义。
- border 由宽度、颜色、样式三部分组成，样式不支持时会回退为 solid。

● 1．height 和 width
　　简单地说，单元的宽度和高度就是包围其内容的边缘框（bounding box）的大小——也即位于边距、衬距或边界之内的空间大小。这个框，有时也称之为内边缘框（inner bouding box）。内边缘框尽可能地接近单元的内容，因此，单元的高度和宽度可以简单地定义为内边缘框对边的距离。
　　CSS中，有时可使用 width 和 height 特性来指定单元的宽度和高度。原则上，这两个特性既可以取具体的长度值，也可以取关键字 auto。关键字 auto 要求浏览器根据实际情况自动调整大小。Width 还可以取百分比值，在这种情况下，width 值应是父单元宽度的百分比值。Width 和 height 的缺省值均为 auto。
　　并不是所有的格式类型都可以指定宽度和高度。如，非空的行间格式单元就不能定义宽度或高度。行间格式单元可能占据多行，创建多个不同宽度，也可能是不同高度的格式框。因此，width 和 height 特性同这些单元是不相关的。但要注意，width 和 height 能够用来改变行间 IMG 单元的大小。
　　多数情况下并不需要指定高度和宽度，因为浏览器会调整这些特性值以满足单元内容的需要（缺省情况）。相反，如果为块级单元强制定义一个固定大小的方框，很可能会出现一些问题。因为文档内容的改变或者样式表特性的改变将会时内容不再适合所指定的方框。
　　然而，在另外一些情况下，为块级单元或浮动单元指定其中的一个特性是有用的，这样仍可改变其它的尺寸，并最终使内容适合单元的方框。
　● 2．衬距 （padding）
　　衬距（padding space）是值“衬”于单元内容周围的空白。多数情况下，衬距都被看成是单元的一部分，并且同单元内容有一样的背景颜色和背景图像。衬距常用来在单元的周围开辟一片缓冲区，在单元和相邻单元之间创建空白区，或是在单元内容和单元边界（border）之间创建空白区。不过，相邻格式单元之间的衬距作用与单元类型有着很大关系。
　　衬距特性值既可以是长度值，也可以是百分比值。百分比值相对于父单元的宽度计算。衬距值必须是正的，因为该值指定衬距区域的大小，而区域大小是不能为负值的。衬距特性的缺省值是0。显而易见，衬距是不能够被继承的。
　　有五个定义衬距宽度的特性：其中四个 padding-top、padding-bottom、padding-left、padding-right 分别定义单元上边、下边、左边和右边的衬距宽度，还有一个简写特性 padding 可一次定义所有的衬距宽度，使用参见下表。此外，简写特性 border-width 和 margin 的使用同特性 padding。
四种可能的简写特性（padding）值及含义 特性指定 含义
padding : len1 所有衬距宽度均为 len1
padding : len1 len2 上衬距和下衬距宽度为 len1，左衬距和右衬距宽度为 len2
padding : len1 len2 len3 上衬距宽度为 len1，右衬距和左衬距宽度为 len2，下衬距宽度为 len3
padding : len1 len2 len3 len4 上、右、下和左衬距的宽度分别为 len1、len2、len3 和 len4
　　衬距可用于任一格式单元。衬距对相邻格式单元布局的影响与单元的格式类型密切相关。对于块单元或浮动单元，增大衬距，可使单元远离其父单元的内边缘框或相邻单元的外边缘。
　● 3．边界 （border）
　　边界是位于单元内容和衬距之外的直线。四条边界的宽度可由特性：border-left-width（左边界宽度），border-right-width（右边界宽度），border-top-width（上边界宽度），border-bottom-width（下边界宽度）分别定义或由简写特性 border-width 一次定义。同边距宽度一样，以上特性既可以取长度值，也可以取百分比值。所有的边界宽度特性也可以取四个关键字：thin（细）、medium（中）、thick（粗）和none（无）。每一个都具有明显的含义。缺省的宽度指定为 medium 。同衬距一样，边界的宽度不能够为负值。
　　另有两个特性定义边界的特征。其中 border-color 定义边界颜色，其值既可以为颜色名称，也可为RGB代码。缺省时，边界颜色同单元文本颜色；border-style 定义边界类型。其可能取值及含义见下表，缺省值为 none，即不显示任何边界，即便是给定了宽度值。注意浏览器并不支持所有的边界类型，对于其不支持的所要求的类型，使用类型“solid”代替。
Border-style 特性值及含义 特性值 描述
dashed 使用虚线绘制边界，该线绘制在单元背景之上
dotted 使用点划线绘制边界，该线绘制在单元背景之上
double 使用双线（a double line）绘制边界，该线绘制在单元背景之上。内层边线与外层边线之间的距离为边界的宽度
groove 使用三维的槽纹图形作为边界
inset 绘制的边界使单元内容看起来好象有凹陷的感觉
none 不显示边界（缺省值）
outset 绘制的边界使单元内容看起来好象有凸出的感觉
ridge 将边界绘制成脊状（凸出的槽纹）
solid 使用实线绘制边界
　　最后，特性 border 可同时设置四条边界的宽度、类型和颜色。一般形式如下：
　　　　border : width style color ;
其中，width 是任何允许的宽度值，style是任何允许的类型值，color 是任何允许的颜色值。这些值的写法是不计顺序的，或者也可以不写。后一种情况下，浏览器将假设其为缺省值。
　　同衬距一样，边界可用于任一个格式单元。边界对相邻格式单元布局的影响与单元的格式类型密切相关。对于块单元或浮动单元，增大边界宽度，可使单元远离其父单元的内边缘框或相邻单元的外边缘。
　　尽管 border 常用来包围一个文本块，但从原理上讲，border 也可以创建标记文本快的边界线，或是相邻文本块之间的分界线。
　● 4．边距 （margin）
　　边距（margin）是指围绕在单元及其衬距和边界四周的空白。边距是透明的，显示父单元的背景。因此，如果一个具有黄色背景的P单元及其边距位于一个具有红色背景的DIV单元内，那么，围绕P的边距区域将为红色。单元四周边距的宽度可由以下特性分别定义：margin-left（左边距）、margin-right（右边距）、margin-top（上边距）和margin-bottom（下边距），也可由简写特性 margin 一次定义。
　　边距值可以是长度值，也可以是百分比值，或是关键字 auto。关键字 auto 所设置的边距大小取决于单元的类型（块级、行间、浮动），同时也取决于与其相关联的边距、宽度或高度指定。
　　对于块级单元或浮动单元，边距特性既定义单元所占的空间，又定义单元相对于父单元（或相邻单元）的位置。

## 延伸问答与排错指南 (FAQ)

### CSS 里 width 和 height 什么时候最容易出问题？
当你给块级单元强行设定固定宽高时，内容一旦变长或样式变化，就可能溢出或被挤压。更稳妥的做法是优先让浏览器按内容自动计算，必要时只控制其中一个方向，再配合 padding 和 border 调整视觉空间。

### padding 的百分比是按什么计算的？
padding 的百分比值是相对于父单元的宽度计算，不是相对于自身高度。它的默认值是 0，而且不能为负数。实际布局里，padding 常用于拉开内容与边框、或制造单元之间的留白。

### border-style 和 border-width 有什么区别？
border-width 只管边框粗细，border-style 决定边框是否显示以及显示成虚线、双线、凹槽等哪种样式。即使设置了宽度，如果 style 是 none，边框也不会显示。若浏览器不支持某种样式，通常会用 solid 代替。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)