Has CSS replaced <br/>?

css, html, line-breaks

Solution

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.

Problem

Original source