Html CSS 取代了 <br/> 吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17494029/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:49:29  来源:igfitidea点击:

Has CSS replaced <br/>?

htmlcssline-breaks

提问by Mohammad Areeb Siddiqui

Nowadays I see many websites having few or no <br/>tags. Has CSS obviated the need for <br/>, or is <br/>still useful?

现在我看到许多网站几乎没有<br/>标签。CSS 消除了对 的需要<br/>,还是<br/>仍然有用?

I am asking this so that I know whether or not to use <br/>in the future.

我问这个是为了我知道<br/>将来是否使用。

回答by Rory O'Kane

As D.A. said, sometimes <br>is appropriate and sometimes it isn't – it depends on what you're using it for. Here are some examples of what CSS to useinstead of <br>, in the cases where <br>is not appropriate.

正如DA 所说,有时<br>合适,有时不合适——这取决于您使用它的目的。以下是在不合适的情况下使用 CSS代替 的一些示例。<br><br>

Vertical margin or padding

垂直边距或填充

If you're using <br>to add vertical space just because it looks nicer (not because the line breaks are part of the content), you should use vertical margin or padding. Instead of this:

如果您<br>仅仅因为看起来更好(而不是因为换行符是内容的一部分)而使用添加垂直空间,您应该使用垂直边距或填充。取而代之的是:

<div class="foo">some content</div>
<br><br>
<div class="bar">more content</div>

You might want this:

你可能想要这个:

<div class="foo">some content</div>
<div class="bar">more content</div>
.foo { margin-bottom: 2em; }

Depending on the situation, you might want to change the distance 2em, or using paddinginstead of margin, or put the space at the top of .barinstead of the bottom of .foo.

根据情况,您可能想要更改距离2em,或者使用padding代替margin,或者将空间放在 的顶部.bar而不是底部.foo

display: block

display: block

If you're using a single <br>to break a line into two solely for visual effect, it might be better to use display: block. If you have this HTML in a form:

如果您<br>仅出于视觉效果而使用单个将一条线分成两条,则最好使用display: block. 如果您在表单中有此 HTML:

<label for="first-name">First name:</label>
<br>
<input type="text" id="first-name" name="first-name" />

then you should do something like this instead:

那么你应该做这样的事情:

<label for="first-name">First name:</label>
<input type="text" id="first-name" name="first-name" />
form label { display: block; }

<label>s are display: inlineby default, meaning they can sit on a line with other text. When you make an element display: blockand don't set its widthto a fixed value like 100px, the element expands to fill the whole line, forcing the element after it to the next line.

<label>s 是display: inline默认的,这意味着它们可以与其他文本位于同一行。当您创建一个元素display: block并且不将其设置width为固定值时100px,该元素会扩展以填充整行,从而强制将其后面的元素移至下一行。

回答by DA.

<br>is a valid tag. But it's just a line break. You typically don't NEED line breaks as there are typically much more semanticly meaningful tags to use to format your content. But it all depends on context.

<br>是一个有效的标签。但这只是换行。您通常不需要换行符,因为通常有更多语义上有意义的标签可用于格式化您的内容。但这一切都取决于上下文。

It'd be better to ask us if a specific use of the <br>tag makes sense. Post some examples of how you use it.

最好询问我们<br>标签的特定使用是否有意义。发布一些有关如何使用它的示例。

回答by ferne97

<br>tags are fine to use, just make sure you use them appropriately. If you find yourself using more than one to get extra spacing then you should be using css instead. A common use of the <br>tag is when inserting something like an address.

<br>标签很好用,只要确保正确使用它们。如果您发现自己使用多个来获得额外的间距,那么您应该改用 css。<br>标签的一个常见用途是插入地址之类的内容。

<p>Company Name<br>
Address Line 1<br>
Address Line 2<br>
City, State, Zip</p>

Try not to use them for presentation, if you need more than a single line break then use margin or padding in css.

尽量不要将它们用于演示,如果您需要多个换行符,请在 css 中使用边距或填充。

Do not do this

不要这样做

<p>some paragraph text</p>
<br><br><br>
<p>more content</p>

回答by Yogu

Use <br>whenever the contentcontains a line break. There are a few cases:

使用<br>每当内容包含一个换行符。有几种情况:

  • In a forum, if the poster signs his/her post:

    <p>See you,<br>Jon Doe<br>
    
  • For postal addresses, if it would be an overkill to use dedicated <div>s each with its own class for the name, the street, the state etc.

    <p>Jon Doe<br>Sunrise Avenue 123<br>Saint Nowhere</p>
    
  • More generally, if users can enter formatted text, and someone enters a single line break.

  • 在论坛中,如果发帖人在他/她的帖子上签名:

    <p>See you,<br>Jon Doe<br>
    
  • 对于邮政地址,如果使用<div>每个都具有自己的名称、街道、州等类别的专用s是一种矫枉过正的话。

    <p>Jon Doe<br>Sunrise Avenue 123<br>Saint Nowhere</p>
    
  • 更一般地,如果用户可以输入格式化文本,并且有人输入单个换行符。