Has CSS replaced <br/>? [closed]

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.

Answer 2

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

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.