HTML中空格换行在解析时被压缩为单空格，需用 、CSS或语义标签控制；<br>用于无语义换行，<p>等块级标签兼具语义与换行；inline-block间隙源于空白符，可用flex/gap解决；动态内容换行需white-space或<br>转换。
HTML源码里的空格和换行，浏览器根本不会照单全收——它们在解析阶段就被统一压成一个空格，DOM里早已没了原始结构。想让格式“按你写的来”，得清楚什么时候该用语义标签、什么时候靠CSS控制、什么时候必须手动插入字符。
空格显示：别指望敲空格就能留出间距
连续敲多个空格、Tab或换行，最终只显示一个空格。这是HTML解析器的默认行为，不可逆。
- 需要两个以上可见空格时，用 （非断行空格）代替普通空格，比如“100 kg”能确保单位紧贴数字
- 纯视觉对齐不用空格堆砌，改用CSS的text-indent、padding或margin
- <pre>或white-space: pre不能“恢复”已丢失的空格，只对DOM中还存在的空白符起作用
换行显示：区分语义换行和视觉换行
源码里回车 ≠ 页面上换行。真正起效的换行方式有三类，用途完全不同：
- <br>：行内强制换行，适合地址、诗歌等需精确控制位置的场景，不带语义
- <p>、<h2>等块级标签：天然换行+语义化，利于SEO和屏幕阅读器
- white-space: pre-line：最常用，保留文本中的\n并换行，同时合并多余空格，适合用户评论、富文本内容
inline-block元素间的缝隙：其实是空格字符在作怪
两个display: inline-block的<div>之间换行，会被当成一个空格字符参与布局——它有字体大小、有宽度，但检查元素时看不到任何margin。
立即学习“前端免费学习笔记（深入）”；
- 去掉HTML源码中标签之间的换行和空格，写成<div></div><div></div>
- 给父容器设font-size: 0，子元素再单独设字体大小
- 现代方案优先用display: flex或grid，配合gap控制间距，彻底绕过这个问题
动态内容中的换行：JS传入的\n必须被正确识别
后端返回的字符串如果含\n，前端用textContent赋值后，必须配white-space: pre-line才生效；若用innerHTML，则要先替换成<br>。
- 安全推荐：element.textContent = str; element.style.whiteSpace = 'pre-line';
- 避免innerHTML直接拼接未过滤的内容，有XSS风险
- Vue/React中，v-html或dangerouslySetInnerHTML同理，需确保换行符已转义或替换
