html默认合并连续空格和换行，这是规范行为而非bug；需保留空格时优先用white-space: pre-wrap，代码块用但注意语义与样式限制，且white-space必须作用于直接包裹文本的元素。
HTML默认会合并连续空格和换行
浏览器渲染时，<p>hello world</p> 会显示为 “hello world”（只保留一个空格），因为HTML规范规定：所有空白字符序列（空格、制表符、换行）统一视作单个空格处理。这不是bug，是标准行为。
常见错误现象： 用太多导致维护困难；<pre class="brush:php;toolbar:false;"></pre> 套错内容破坏语义；CSS white-space 写在父元素却对子元素无效。
- 需要保留空格但不改变语义结构 → 优先用
white-space: pre-wrap - 要等宽对齐或代码片段 → 用
<pre class="brush:php;toolbar:false;"></pre>，但注意它默认有上下外边距和等宽字体 - 仅需多一个空格 → 用
- 表格内空格异常 → 检查是否被
table-layout: fixed或overflow: hidden干扰
white-space属性的四个关键取值区别
white-space 是最灵活的控制方式，但各值行为差异大，容易误用：
-
white-space: normal：默认值，合并空格+自动换行 -
white-space: nowrap：合并空格，但强制不换行（常用于导航栏文字防折行） -
white-space: pre：保留空格和换行，但不自动换行（超长内容会撑破容器） -
white-space: pre-wrap：保留空格和换行，且允许自动换行（日常最常用）
性能影响小，但要注意：该样式必须作用在**直接包裹文本的元素上**，比如 <div style="white-space: pre-wrap"> a b </div> 才生效；若只设在父 <section></section> 上，子 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 仍按默认规则处理。
标签的真实使用边界
<pre class="brush:php;toolbar:false;"></pre> 确实保留所有空白，但它有隐含语义：表示“预格式化文本”，浏览器默认给它 font-family: monospace 和 margin。不是所有需要空格的场景都适合它。
- 适合：
<pre class="brush:php;toolbar:false;"><code>function foo() {<br> return true;</code></pre>这类代码块 - 不适合：
<pre class="brush:php;toolbar:false;">姓名：<span>张三</span></pre>——<span></span>在<pre class="brush:php;toolbar:false;"></pre>里仍可嵌套，但语义混乱，且空格控制粒度太粗 - 兼容性没问题，但移动端可能因等宽字体导致文字偏小，建议显式重置
font-size和font-family
不要忽略空格的来源：换行符也算空白
写HTML时，编辑器换行本身会产生空白字符。比如：
<div> hello world </div>
这段实际等价于 <div>↵ hello↵ world↵</div>，前后换行+缩进都会被当作空格参与渲染。容易踩的坑：
- 用
display: flex排版时，元素间的换行会生成空格节点，导致意外间隙 → 改用注释消除：<div><span>a</span></div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
