html 为什么在和之间没有空的线< a>当有一个 在它们之间

mqkwyuun 于 2023-04-18 发布在其他

关注(0)|答案(1)|浏览(94)

<a href="google.com">google</a>
<br />
<a href="google.com">google</a>
<br />
<p>This is first paragraph.</p>
<br />
<p>This is another paragraph.</p>

上面的代码产生相同的输出，即使你删除了和<a>标记之间的 标记。 标记中断了行，作为块级元素应该在新的一行开始，也就是说，它应该再次断开自己前面的行。所以在输出中，和<a>标记之间不应该有一个空行。但是在输出中，在<a>和之间没有空行。而且当随后在<a>和之间添加更多的 标记时，它确实会创建更多的空行。但是只有一个 标记没有区别，为什么？
我尝试在<a>和之间添加一个 标签，希望这会在<a>和标签之间创建一个空行。但是它没有发生，所以只有一个 标签，即使没有 标签，它也会产生相同的输出。为什么会这样？

Html

来源：https://stackoverflow.com/questions/76006784/why-is-there-no-empty-line-between-p-and-a-when-there-is-one-br-in-between

1条答案

按热度按时间

plicqrtu1#

这是因为元素是一个块级元素，这意味着它占据了其父容器的全部宽度，并在元素前后创建了一个新行。因此，即使元素之前有一个换行符，浏览器仍然会将其视为与其前面的文本在同一行上。
你可以将<a>元素显示为block和display: block，以获得它们之间的空间：

a {
  display: block;
}

<a href="google.com">google</a>
<br />
<a href="google.com">google</a>
<br />
<p>This is first paragraph.</p>
<br />
<p>This is another paragraph.</p>

此外，您可以使用margins来创建没有 元素的空间：

a {
  display: block;
  margin-bottom:16px;
}

<a href="google.com">google</a>
<a href="google.com">google</a>
<p>This is first paragraph.</p>
<p>This is another paragraph.</p>

赞(0）回复(0）举报 2023-04-18

我来回答

html 为什么在和之间没有空的线< p>< a>当有一个< br>在它们之间

1条答案

相关问题

热门标签

最新问答