正在加载...

CSS 内边距

Margin 把盒子推开。你也常常需要盒子里面的空间——让文字不贴边框，按钮也好点。这个内侧缓冲就是 padding。

什么是 padding？

Padding 是元素内容与其边框之间的空白。它在边框里面。增大 padding，内容离边缘更远，盒子通常也变大（除非你之后改 box-sizing）。

Padding 与 margin 一眼对比

两者很容易混。把职责分开。

📊 Padding 与 margin

工具 位置 日常用途
padding 边框内侧 给文字留白、加大可点区域
margin 边框外侧 把这个盒子与邻居分开
背景 通常填满 padding 颜色/图片常常盖住缓冲带
垂直折叠 Padding 不会折叠 堆叠块的 margin 可能折叠

每边相同的 padding

从一张安静卡片的一个长度开始。

四边相同 padding

css
CSS Code 
.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* 外侧空隙——另一工具 */
}

你应该注意到什么？

文字离开灰色边框。白色背景也填满 padding 区域——不只是字母。

两个值 — 先垂直后水平

两个长度配对对边：先是上下；再是左右。

先垂直后水平的 padding

css
CSS Code 
.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

四个值 — 从上顺时针

每边需要各自缓冲时：上 → 右 → 下 → 左。

四边 padding 简写

css
CSS Code 
.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

按钮喜欢 padding

Padding 加大舒适点击区，却不必改标签字号。短标签配上充足 padding，感觉现代又好点。

带 padding 的按钮

css
CSS Code 
.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}

背景填满 padding

与 margin（外侧）不同，padding 仍属于元素被绘制的盒子。背景色或图片通常覆盖 padding 区域。

着色的 padding 区域

css
CSS Code 
.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}

自己试试

  1. 做带 padding: 16px 和可见边框的卡片——文字不要贴边。
  2. 改成 padding: 20px 12px，感受更高 vs 更宽的缓冲。
  3. 做水平 padding 大于垂直的按钮。
  4. 青绿横幅加大 padding 与更深边框——看颜色填满缓冲。
  5. 两张卡片之间只用 margin，再在一张内部只用 padding——感受不同职责。

常见错误

  • 用 padding 把盒子推开（那是 margin 的活）
  • 以为兄弟之间的 padding 会像垂直 margin 那样折叠（不会）
  • 忘记背景通常会画过 padding 区域
  • 每边巨大 padding，而适中尺度更干净
  • 搞混四个值的顺序（上、右、下、左）

小结

  • Padding 是内容与边框之间的内侧空间
  • 简写：1、2 或 4 个值（四个从上顺时针）
  • 背景通常填满 padding 区域
  • Padding 不会像垂直 margin 那样折叠
  • 按钮和卡片靠 padding 获得舒适感
  • Margin 仍是外侧表亲——两件工具都要锋利

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程