合理使用 padding 是解决页面拥挤最直接有效的解法——它通过在元素内部撑开空间提升可读性与层次感，需注意响应式调整和 box-sizing 避免溢出。
页面内容太拥挤，本质是元素之间缺乏呼吸感。合理使用 padding 是最直接、最可控的解法——它在元素内部“撑开”空间，让文字、按钮、卡片等有足够余白，视觉上立刻更清晰、更易读。
从最常被忽略的地方加 padding
新手常只给外层容器设 margin，却忘了内容本身也需要内边距。比如：
- 段落（
p）加padding: 12px 0;，上下留空，避免文字贴着上下元素； - 按钮（
button）加padding: 8px 16px;，让文字不顶边不挤角，点击区域也更友好； - 卡片（
.card）加padding: 20px;，内容和边框之间自然分隔，层次立现。
用 padding 替代“硬塞”的 margin
当两个块级元素（如标题+段落）看起来太紧，别急着给段落加 margin-top。试试给标题加 padding-bottom——这样间距属于标题的“领地”，逻辑更清晰，后续调整也不容易错乱。同理，表单控件的上下间距，优先考虑 input 自身的 padding，而不是靠 margin 推动整个结构。
响应式中 padding 要“收放有度”
小屏下大 padding 会吃掉宝贵空间。可用媒体查询动态调整：
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
.section { padding: 40px 20px; } - 手机端：
@media (max-width: 768px) { .section { padding: 24px 16px; } }
数值不必严格对半减，重点是保证文字可读、操作区域不局促。
警惕 padding 和 border 的叠加陷阱
当元素设置了 border 又加了 padding，总宽度 = width + padding × 2 + border × 2。若容器宽度写死（如 width: 300px），padding 一加就可能溢出。解决方案很简单：加上 box-sizing: border-box;，让 padding 和 border 都算在 width 之内，从此安心加内边距。
不复杂但容易忽略：padding 不是装饰，是信息的缓冲带。加得恰到好处，用户一眼就知道哪里该看、哪里该点。
