应设置 box-sizing: border-box 解决 padding 撑破容器问题；移动端宜用 em 等相对单位配合媒体查询；卡片留白优先用 padding-bottom 保证背景延续；避免 line-height 与固定 height 冲突，按钮高度直接由 padding 控制。
padding 设置后内容被挤出容器怎么办
这是最常见的误判：不是 padding 太大，而是没配 box-sizing: border-box。默认 box-sizing: content-box 下，width: 300px; padding: 20px; 实际占宽 340px，容易撑破父容器或触发横向滚动。
解决方法很简单：
- 全局加一句：
* { box-sizing: border-box; }（推荐放在重置样式最前） - 或局部加：
.card { box-sizing: border-box; width: 300px; padding: 20px; } - 别用百分比
padding配固定width——比如width: 200px; padding: 10%;会按父宽算，结果不可控
移动端 padding 值该设多少才不显得空或挤
固定像素值在小屏上很容易失效。比如桌面端舒服的 padding: 24px，在 iPhone SE 上会让文本只剩一行可读空间。
更稳妥的做法是分层控制：
- 基础层用相对单位：
padding: 0.75em 1em;（随字体缩放，且行高变化时自动适配） - 断点微调：
@media (max-width: 480px) { .text-block { padding: 0.5em 0.75em; } } - 卡片类组件优先用统一层级：
--spacing-xs: 8px; --spacing-sm: 12px; --spacing-md: 16px;，然后padding: var(--spacing-md);
为什么 padding-bottom 比 margin-bottom 更适合卡片内文留白
因为 padding 属于元素背景和边框的“可见区域”，而 margin 是透明的外部间隙。卡片带背景色或阴影时，用 padding-bottom 能让底部空白也覆盖背景，视觉更连贯；若用 margin-bottom，空白处会透出父容器底色，割裂感强。
典型场景对比：
- ✅ 正确：
.card { background: #fff; border-radius: 8px; padding: 16px 16px 24px; }（底部多留白，背景延续） - ❌ 容易错：
.card { margin-bottom: 24px; padding: 16px; }（底部空白无背景，卡片像“浮”在页面上） - ⚠️ 注意：
padding-bottom对 flex 子项的对齐无影响，但margin-bottom可能触发外边距合并（margin collapse），尤其在相邻段落间
padding 和 line-height 搭配时的常见冲突
当同时设置 padding 和 line-height 时，如果容器高度固定，line-height 过大会把文字顶出 padding 区域——不是 bug，是盒模型叠加效果。
例如：height: 40px; padding: 8px; line-height: 2.5;，实际行高为 40px × 2.5 = 100px，远超容器，文字溢出。
安全做法：
- 单行文本：用
height+line-height居中时，确保line-height ≤ height - 2 × padding - 多行文本：放弃固定
height，改用min-height+line-height: 1.5（无单位值，基于 font-size 计算） - 按钮等控件：直接用
padding控制高度，删掉height和line-height——文字会自然垂直居中
真正难的不是写对某一行代码，而是记住 padding 不是万能胶——它只负责撑开内部空间，不解决对齐、换行、响应式断裂这些事。一不留神，就会用它去“顶”兄弟元素、“压”文字行高、“猜”移动端尺寸。越基础的属性，越要把它当成设计系统里一个有明确边界的零件来用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
