以 D.A.说，有时 < br> 是合适的，有时甚至不合适-这取决于您使用它的目的.在不适合使用
的情况下，以下是使用哪种CSS 而不是< br> 的一些示例./p>

垂直边距或填充

如果您使用< br> 来添加垂直空间仅仅是因为它看起来更好(不是因为换行符是内容的一部分)，则应使用垂直边距或填充.代替这个:

 < div class ="foo">某些内容</div>< br>< br>< div class ="bar">更多内容</div> 

您可能想要这个:

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

  .foo {margin-bottom:2em;} 

根据情况，您可能需要更改距离 2em ，或使用 padding 代替 margin ，或将空格 .bar 的顶部，而不是 .foo 的底部.

显示:阻止

如果您仅使用一个< br> 出于视觉效果就将一行分成两行，则***使用 display:block .如果您使用以下格式的HTML:

 < label for ="first-name">名字:</label>< br><输入type ="text" id =名字" name =名字"/> 

然后您应该执行以下操作:

 < label for ="first-name">名字:</label><输入type ="text" id =名字" name =名字"/> 

 表单标签{display:block;} 

默认情况下，

< label> 是 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.