HTML <pre> 标签添加了额外的换行符

Question

HTML 标记

 在文本的顶部和底部添加换行符。


所以:

 
<pre>Text line     1</pre>
<pre>Text line     2</pre>


显示为:

 
Line     1

Line     2


有没有办法让它在 HTML 标签本身而不是通过 CSS 中只考虑空格而不换行？

			            

Answer 1

这不是 pre 之间的换行符s，而是浏览器的 native 样式表的性质。例如，Chrome 设置 pre格式化文本的顶部和底部边距为 1em。

所以要删除边距，您应该添加:

pre { margin: 0; }

可能还有其他浏览器不强制使用默认的 1em 顶部/底部边距。但是，最好的办法是手动设置边距以获得一致的跨浏览器外观。或者更好的是，使用 CSS 重置覆盖所有浏览器的 native CSS 样式。

(作为记录，Google Chrome 浏览器的 pre 标签的 native 样式表规则):

pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px; /* here's the reason you get the "line break" */
}