最直接有效的办法是用 padding 给内容留出呼吸空间；通过设置 padding 值可统一增加容器内边距，配合 box-sizing: border-box 和媒体查询，实现专业、响应式的文字间距控制。
文字紧贴容器边界，看起来拥挤又不专业，最直接有效的办法就是用 padding 给内容留出呼吸空间。
用 padding 统一增加内边距
在文字所在容器（比如 div、p、button）上设置 padding，就能让内部文字自动远离四周边框。常用写法：
-
padding: 12px;—— 四边等距，简洁常用 -
padding: 10px 16px;—— 上下 10px，左右 16px（适合按钮或行内块） -
padding: 8px 12px 8px 32px;—— 左侧留更大空间（如带图标文字）
避免误用 margin 替代 padding
margin 是推外部元素，不影响容器内文字与边框的距离；padding 才是撑开内部空间的关键。如果加了 margin 文字还是贴边，说明没对症——请检查是否改错了属性。
注意 box-sizing 别被忽略
默认 box-sizing: content-box 下，加 padding 会让容器总宽度变大。若需“指定宽高 = 可视区域 + 内边距”，请加上：
立即学习“前端免费学习笔记（深入）”；
box-sizing: border-box; —— 这样设置 width: 200px; padding: 10px;，整体仍占 200px 宽，更可控。
小屏幕下 padding 要适当收敛
移动端空间紧张，过大 padding 易造成文字换行或溢出。建议配合媒体查询微调：
@media (max-width: 480px) { .text-box { padding: 6px 10px; } }- 或使用相对单位：
padding: 0.5em 1em;，随字体缩放自适应
基本上就这些。padding 是最基础也最可靠的内边距控制方式，不复杂但容易忽略细节。
