17370845950

文字靠边问题本质是容器缺乏内边距和行高控制，需用padding（如左右16px–24px、上下0.8em–1.2em）留出呼吸感，并设box-sizing:border-box；再以无单位line-height（正文1.5–1.7，标题1.2–1.4）调控纵向节奏。

文字太靠边，本质是容器内缺乏足够的内边距和行高控制，导致视觉拥挤、可读性下降。解决关键不是单纯调字体大小，而是用 padding 留出四周呼吸感，再用 line-height 控制行间松紧。

给文字容器加 padding，避免贴边

块级元素（如 p、div、section）默认 padding 为 0，文字紧贴边界。只需为上下左右或仅左右设合理内边距：

• 左右 padding 推荐 16px–24px（适配移动端可设为 1rem 或 1.5rem）
• 上下 padding 按内容层级定：标题可小些（0.5em），正文段落建议 0.8em–1.2em
• 避免只加 left/right 忘记 box-sizing：记得写 box-sizing: border-box，防止 padding 加大总宽度

用 line-height 统一垂直节奏

line-height 决定行与行之间的空白，太小显压抑，太大显松散。注意它不等于 font-size 的倍数，而是整行高度的计算基准：

• 正文推荐 1.5–1.7（如 line-height: 1.6;），兼顾可读与现代感
• 标题可略紧凑（1.2–1.4），但别低于 1.1，否则字形易“粘连”
• 慎用 px 值（如 line-height: 24px），会导致子元素继承失真；优先用无单位数值

特殊场景：按钮/卡片里的文字要更“稳”

按钮、标签、卡片标题等小尺寸容器，光靠 padding 不够，需配合最小高度和垂直居中：

• 设 height 或 min-height 配合 line-height = height 实现单行垂直居中
• 多行文本卡片，用 display: flex; align-items: center; 更可靠，line-height 辅助微调
• 图标+文字组合时，统一用 line-height 对齐基线，比 margin-top 更稳定

基本上就这些。padding 定边界呼吸感，line-height 掌控纵向节奏——两者配合，文字立刻“站得稳、看得清”。不复杂但容易忽略。