紧凑型文字排版需精准归零p的margin、line-height和text-indent三处默认“呼吸感”，如p{margin:0;line-height:1.2;text-indent:0}，避免误用inline-block、font-size:0或伪空格。
紧凑型文字排版不是靠删空格或硬塞样式，而是主动抑制浏览器默认的“呼吸感”——p 的上下 margin、段内 line-height、首行 text-indent 这三处必须精准归零或压缩，否则再小的字体也显松散。
怎么让段落之间不留空隙
浏览器给 p 默认加了约 1em 上下外边距，这是紧凑排版的第一道障碍。不能只设 margin-top: 0，否则相邻段落的 margin-bottom 会叠加出意外空白。
- 全局清空：
p { margin: 0; }最直接，但会丢失所有段落分隔，慎用于正文 - 选择性收紧：比如在卡片摘要、标签列表、侧边栏说明等场景，用
.compact p { margin: 0.25em 0; }（注意是上下都设） - 避免用
display: inline-block包p后忘记vertical-align: top，否则基线对齐会导致视觉错位
怎么压紧段内行距
line-height 是控制“字堆厚度”的核心。默认值如 1.5 或 normal 在小字号下仍显松，尤其用于表格单元格、按钮文字、图标旁说明时。
- 推荐用无单位数值：
line-height: 1.2;—— 它随font-size缩放，比14px更可靠 - 小于
1.0（如0.9）可进一步压缩，但需实测：中文在font-size: 12px下line-height: 0.9可能导致上下行文字轻微重叠 - 别在父容器设
font-size: 0来清除inline-block间隙，它会让所有em/rem单位失效，line-height和margin全部归零
为什么用了 text-indent 还是不紧凑
text-indent: 2em 是为中文段落留的“传统呼吸位”，在紧凑排版里它就是多余空格。更隐蔽的问题是：哪怕你写了 text-indent: 0，某些 CSS Reset 或 UI 框架（如 Bootstrap）会默认给 p 加 text-indent。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 强制覆盖：
p { text-indent: 0 !important; }（仅限局部强控场景） - 检查继承链：如果父元素设了
text-align: justify，它可能干扰text-indent行为，干脆一并禁用 - 警惕伪空格：用全角空格、
表格和 inline 元素里的紧凑文字怎么调
表格单元格（td）、按钮（button）、导航链接（a）自带默认内边距和行高，光调 p 没用。
-
td, th { padding: 2px 4px; line-height: 1.1; }—— 表格内容紧凑的关键是压padding和line-height同步 -
button, a { display: inline-flex; align-items: center; line-height: 1; }—— 避免inline元素受基线影响产生底部空隙 - 慎用
word-break: break-all强制断行：它会在任意字符间切断，中文里可能把“数据库”切成“数|据|库”，语义断裂
真正难的不是把文字挤在一起，而是判断哪些地方“该紧凑”——比如操作按钮旁的提示文字、数据表格的单元格、折叠面板的摘要行；而正文段落、长文阅读区、表单说明文字，强行紧凑反而伤可读性。浏览器默认样式本就是为可读性设计的，压得太狠，最先崩溃的往往是高 DPI 屏幕、系统字体放大、或屏幕阅读器的解析逻辑。
