内容紧贴边框是因为元素默认 padding: 0，尤其在样式重置后更明显；通过设置 padding（如 padding: 12px 或 padding: 8px 16px）可留出空间，并配合 box-sizing: border-box 避免布局异常。
内容紧贴边框，通常是因为元素默认没有内边距（padding），导致文字或子元素直接顶到边框边缘。加 padding 是最直接有效的解决方式。
为什么内容会紧贴边框？
多数 HTML 元素（如 div、button、p）默认 padding: 0，尤其在重置样式（如 * { margin: 0; padding: 0; }）后更明显。没有内边距，内容就“贴”在边框内侧。
用 padding 快速留出呼吸空间
给元素设置统一或分方向的 padding，就能让内容自然远离边框：
-
padding: 12px;—— 四边等距，适合卡片、按钮等常用容器 -
padding: 8px 16px;—— 上下 8px，左右 16px，适合行内级按钮或输入框 -
padding-top: 10px; padding-bottom: 10px;—— 只调垂直间距，保留左右紧凑感
注意 padding 和 box-sizing 的配合
默认 box-sizing: content-box 会让 padding 增加元素总宽度/高度，可能撑破布局。建议全局设为：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after { box-sizing: border-box; }
这样 padding 就算在 width/height 内部，改起来不意外、不跳动。
其他常见配合技巧
- 文字过长时，搭配
overflow: hidden; text-overflow: ellipsis;防止溢出边框 - 图片紧贴边框？可加
padding，或给图片设display: block;消除底部默认间隙 - 表单控件（如 input、textarea）建议统一设置
padding: 6px 12px;，视觉更协调
基本上就这些。padding 不复杂但容易忽略，加一点，界面立刻更舒服。
