What CSS properties can the br tag have?

Question

I'm messing around with some code right now, and to separate 2 paragraphs I'm using a br tag. To put spacing between the paragraphs, I noticed that I can use either margin or padding to accomplish the same thing. When I'm trying to do other styling, such as adding a border, it doesn't work.

Why can the br tag only have some styles, but not others? I've searched all over, and I've read different articles/guides that contradict each other about how the br tag can be used.

br {
  padding: 50px;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

BR is a newline. Why would an empty invisible separator have borders? Use a div or hr — mplungjan, Mar 31 '19 at 12:33
I don't understand why you would need a `br` tag or any element to put spacing or borders when you can just use the two paragraphs and some css applied to them? — daformat, Mar 31 '19 at 12:40
if the idea is to set a br at the end of a paragraph and visually style it, you may use a pseudo element instead, it will be efficient for the visual styling without extra markup. If you want to increase that newline a br creates, font-size or line-height should work . — G-Cyrillus, Jun 13 '22 at 14:20
Wrap it in a `span` element and style it instead. However, a `border-right` css rule will still show on the same line as a `border-left`, both as if they were at the start of the `br` — Patanjali, Jan 01 '23 at 12:13

score 51 · Accepted Answer · edited Jun 20 '20 at 09:12

If you check the MDN you can read this:

The <br> element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.

You can set a margin¹ on <br> elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose

And considering the specification we can read:

The br element represents a line break.

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

So basically the browser will simply ignore all the styling² you apply since the purpose of this tag is to add a line break.

Also note that in your case, br is disabling the margin collapsing between your p element because it creates an anonymous box containing an empty line:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Remove the default margin to better see that empty line:

p {
 margin:0;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

And setting font-size:0 will make our line disappear but the margin collapsing is still disabled:

body {
  font-size: 0;
}

p {
  font-size: initial;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

So the br tag should be used inside a p element and not outside of it.

^{1: only Firefox is respecting the margin. Chrome is ignoring them.}

^{2: I basically mean visual styling as we can for example use display to show/hide the br}

If you `display:none` a `
` it will not add a line-break. I don't know it this is conforming (I came across it while maintaining a badly written legacy code base) but not all of the style is ignored for `
`. — Margaret Bloom, Mar 31 '19 at 13:44
@MargaretBloom by *styling* I meant visual styles like border/color, etc but yes display works on br. (used sometimes with media query for responsiveness) — Temani Afif, Mar 31 '19 at 13:47
Note that statement in the HTML specification doesn't say anything about ability to apply styling to it; it's purely a conformance requirement placed on authors. UA conformance requirements are separate; see [issue #2291](https://github.com/whatwg/html/issues/2291) on the spec for discussion about how much CSS applies to the br element. — gsnedders, Apr 01 '19 at 13:58

daformat · Answer 2 · 2021-02-28T06:05:45.550

There is no need for a <br> or a <hr> element in this situation. The br tag is for newlines as said in the other answers. You can simply use the paragraphs with css applied to them:

p + p { /* Matches any p tag that is directly preceeded by another p tag */
  margin-top: 50px;
  border-top: 1px solid black;
  padding-top: 50px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

mplungjan · Answer 3 · 2019-03-31T17:44:40.427

BR is a newline. Why would an empty invisible separator have borders?

Use a border on the p - here I use nth-child to point at the second paragraph's top - I could also use the first paragraph's bottom border

p:nth-child(2) { /* second p */
  border-top: 1px solid black;
  padding-top:10px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Use a div or hr if you want a box

hr {
  padding: 50px;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I fixed your first snippet; CSS doesn't have single-line comments in its syntax, so it wasn't working properly. — Patrick Roberts, Mar 31 '19 at 17:41

Nick · Answer 4 · 2019-03-31T13:28:40.283

Temani Afif's assessment of br was spot on. As he mentioned, the br tag is mainly used where you would have line breaks in papers, such as for poems or addresses.

Adding onto it a bit: hr is essentially a "functional" equivalent of br. The hr tag stands for horizontal rule, and it is very similar to br, except that it defaults to a line. hr tags can be styled more than br tags because of its intended purpose.

Here's the code from your post with a br tag:

br {
  margin: 50px;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Here's the exact same code with an hr tag:

hr {
  margin: 50px;
  border: 1px solid black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I changed padding to margin in these examples to make the demonstration clearer. Using padding with an hr tag would have resulted in a box.

note that margin won't have any effect on the br tag.. the space we are seeing is due to the default `p` margin — Temani Afif, Mar 31 '19 at 13:24
@TemaniAfif - Margins on the br element *are* respected by Firefox. — Alohci, Mar 31 '19 at 19:09
@Alohci correct, I am wondering which behavior is the correct one? (I removed the part talking about margin from my answer as I wasn't really sure) — Temani Afif, Mar 31 '19 at 22:12

score 0 · Answer 5 · answered Mar 31 '19 at 12:56

0

None, br is a newline and is entirely invisible so has no reason to have any css properties.

answered Mar 31 '19 at 12:56

Dan Harmon

313
1
13

What CSS properties can the br tag have?

5 Answers5

Linked

Related