段落 p、换行 br、分隔线 hr

这三行源码分别是 <p>、<br>、<hr> 的实际效果。

第一段:段落自带上下外边距,所以两段之间会自然空开一行。段落内部随便换行、缩进、打很多空格,渲染出来都只会挤成一个空格——这叫空白折叠。

第二段:想在段落内部强制换行,才用 <br>。这里
就是它的作用:紧接着另起一行,但仍然属于同一个段落,所以段前段后不会有额外间距。


分隔线以下:<hr> 表示「主题级别的转换」,不是装饰线。想留出空白请用 CSS 的 margin,别用连续的空段落或 <hr> 撑。

空白折叠的验证:下面这句话的源码里,「A」和「B」之间敲了 十几个空格和一个真实回车,渲染后只剩下一个空格。

A B

想保留真正的空格,用实体 &nbsp;:第一格   第四格。

想要的是「诗歌」这种必须保留换行的内容?那不该用一堆 <br>,而是 <pre>:

床前明月光,
疑是地上霜。
举头望明月,
低头思故乡。