<p>
标签 (paragraph tag) 在 HTML 中代表一个段落。它本身就被设计为在前后都添加垂直空白,从而在视觉上分隔不同的段落。这就是为什么使用 <p></p>
会出现两行空行的原因,并非真正的两行空行,而是一行段落上下的空白。
更详细的解释:
-
块级元素 (Block-level element):
<p>
是一个块级元素。块级元素的特点是会占据其父容器的整个宽度,并且在前后都会产生换行。这意味着即使<p>
标签内没有内容,它仍然会占据一行空间,并且在其上方和下方都会有换行。 -
用户代理样式 (User agent stylesheet): 每个浏览器都有默认的样式表,用于定义 HTML 元素的默认样式。这些样式表会为
<p>
标签添加上下边距 (margin)。正是这些边距造成了段落之间的垂直空白,使得看起来像是两行空行。 -
自定义样式: 你可以通过 CSS 自定义
<p>
标签的样式,包括它的边距。例如,你可以将上下边距设置为0
来移除默认的垂直空白:
p {
margin-top: 0;
margin-bottom: 0;
}
或者,你可以使用其他的 CSS 属性,例如 line-height
或 padding
来控制段落之间的间距。
总结: <p>
标签换行是因为它是块级元素,并且浏览器默认样式表为其添加了上下边距。你可以通过自定义 CSS 样式来控制段落之间的间距。