最直接有效的办法是用 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 会让容器总宽度变大。若需“指定宽高 = 可视区域 + 内边距”，请加上：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

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 是最基础也最可靠的内边距控制方式，不复杂但容易忽略细节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！