网页里的间距怎么来的？
关键词：盒模型 · 页面布局的基本单元
一句话说清网页上每个元素都是一个盒子：里面是内容，往外依次是内边距、边框和外边距。
打个比方
像一幅装裱好的画：画本身是内容，衬纸是内边距，画框是边框，画和画之间留的墙是外边距。
记住这一点
内容 → 内边距 → 边框 → 外边距
举个例子
.card {
padding: 16px; /* 内边距：内容和边框的距离 */
border: 1px solid #ddd; /* 边框 */
margin: 24px; /* 外边距：和别的元素的距离 */
}常见误区
- ✕ 间距随便用空格敲出来✓ 网页里的空格会被合并，间距要用 CSS 控制。
- ✕ padding 和 margin 可以互换✓ padding 在边框里面，会撑大背景色范围；margin 在外面，是透明的。
动手试一试
在浏览器里右键任意网页 → 检查，选中一个元素，看右侧那个彩色的盒模型图。
考考你
3 道小题，看看这张卡片记住了多少。选完马上能看到解析。
1盒模型从里到外的顺序是？
内容外面是内边距（padding），再是边框，最外面是外边距（margin）。
2padding 和 margin 的区别是？
padding 属于盒子内部，margin 是盒子和别的元素之间的距离。
3网页里的间距应该怎么做？
网页里连续的空格会被合并，间距要用 CSS 控制。
接着翻这几张
灵点AI 知识卡片 · 第 14 / 48 张