br标签可以具有哪些CSS属性? [英] What CSS properties can the br tag have?

问题描述

我现在正在弄乱一些代码，并使用br标记分隔两段.为了使段落之间保持间距，我注意到可以使用边距或填充来完成相同的操作.当我尝试做其他样式(例如添加边框)时，它不起作用.

I'm messing around with some code right now, and to separate 2 paragraphs I'm using a br tag. To put spacing between the paragraphs, I noticed that I can use either margin or padding to accomplish the same thing. When I'm trying to do other styling, such as adding a border, it doesn't work.

为什么br标签只能具有某些样式，而不能具有其他样式?我已经搜索了所有内容，并且阅读了不同的文章/指南，这些文章/指南在如何使用br标签方面彼此矛盾.

Why can the br tag only have some styles, but not others? I've searched all over, and I've read different articles/guides that contradict each other about how the br tag can be used.

br {
  padding: 50px;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

推荐答案

如果您选中

If you check the MDN you can read this:

<br>元素具有一个明确定义的目的—在文本块中创建换行符.因此，它没有尺寸或视觉输出，并且您几乎无法做任何样式.

The <br> element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.

您可以在<br>元素本身上设置margin ¹ 来增加块中文本行之间的间距，但这是一个不好的做法-您应该使用line-height属性为此目的而设计的

You can set a margin¹ on <br> elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose

并考虑规范我们可以阅读:

br元素代表换行符.

The br element represents a line break.

br元素必须仅用于换行符，而换行符实际上是内容的一部分，例如在诗歌或地址中.

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

---

因此，基本上，浏览器将完全忽略您应用的所有样式 ² ，因为此标记的目的是添加换行符.

---

So basically the browser will simply ignore all the styling² you apply since the purpose of this tag is to add a line break.

还请注意，在您的情况下，br禁用了p元素之间的边距折叠，因为它创建了一个匿名框包含一个空行:

Also note that in your case, br is disabling the margin collapsing between your p element because it creates an anonymous box containing an empty line:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

删除默认边距以更好地看到空白行:

Remove the default margin to better see that empty line:

p {
 margin:0;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

并设置font-size:0将使我们的行消失，但边距折叠仍然被禁用:

And setting font-size:0 will make our line disappear but the margin collapsing is still disabled:

body {
  font-size: 0;
}

p {
  font-size: initial;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

因此，br标记应在p元素内部而不是外部使用.

So the br tag should be used inside a p element and not outside of it.

^{1:只有Firefox尊重利润率. Chrome忽略了它们.}

^{2:我基本上是指<​​em>视觉样式，例如我们可以使用display来显示/隐藏br}

^{2: I basically mean visual styling as we can for example use display to show/hide the br}

这篇关于br标签可以具有哪些CSS属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！