已将CSS替换为< br /&&gt ;? [英] Has CSS replaced <br/>?

问题描述

现在我看到许多网站很少或没有< br /> 标签。 CSS是否避免了< br /> 的需求，或者< br /> 仍然有用？

我问这个问题，以便我知道将来是否使用< br /> 。

解决方案

由于 DA说，有时 < br> 是合适的，有时并非如此 - 这取决于您使用的是什么。在< br>>的情况下，以下是使用什么CSS 而不是< br> 的示例。 $ b

垂直边距或填充





如果您正在使用 < br> 为了增加垂直空间只是因为它看起来更好（不是因为换行符是内容的一部分），您应该使用垂直边距或填充。取而代之的是：

< br>< br>
< div class =bar>更多内容< / div>

您可能需要：

 < div class =foo>一些内容< / div> 
< div class =bar>更多内容< / div> 
  

.foo {margin-底部：2em; }


根据具体情况，您可能需要更改距离 2em ，或者使用 padding 而不是 margin ，或者将空格放在 .bar 而不是 .foo 的底部。

display：block

如果您使用一个< br> 仅仅为了视觉效果而将一行分成两行，最好使用 display：block 。如果您有以下格式的HTML：

 < label for =first-name >名字：< / label> 
< br> 
< input type =textid =first-namename =first-name/> 
  

然后你应该这样做：

< label for =first-name>名字：< / label>
< input type =textid =first-namename =first-name/>


form label {display：块; }


< label> s are display：inline 默认情况下，这意味着它们可以与其他文本坐在一条线上。当你创建一个元素 display：block 并且不要将它的 width 设置为一个固定值，比如 100px ，元素展开以填充整行，强制元素到达下一行。

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

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

解决方案

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 use instead of <br>, in the cases where <br> is not appropriate.

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:

<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 padding instead of margin, or put the space at the top of .bar instead of the bottom of .foo.

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:

<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: inline by default, meaning they can sit on a line with other text. When you make an element display: block and don’t set its width to a fixed value like 100px, the element expands to fill the whole line, forcing the element after it to the next line.

这篇关于已将CSS替换为&lt; br /&&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！