Has CSS replaced <br/>?

Question

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.

Answer 1

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.