How to adjust the amount of space between two lines at each <br> in CSS?

Question

I have a document like this:

This is some text.<br>
This is some more text.<br>
This is yet some more text.

This renders like this:

This is some text.
This is some more text.
This is yet some more text.

Is there any way to adjust space between lines, but only where the <br>'s appear? The output might look like this:

This is some text.

This is some more text.

This is yet some more text.

• This is not the same as double-space, as long lines wrapping on the page would not appear with the extra space.

How can I adjust the amount of space between lines where <br> appears?

Answer 1

It is possible to target a <br> tag with CSS but it will not be very cross-browser compatible and it just isn't a very good idea because anyone looking at your code will assume you haven't got the faintest idea what your doing because there are certainly more appropriate methods to achieve your goal.

br {}

---

The <br> on it's own has no default height. If you have an HTML page with nothing but a <br> you have an empty page. The style on the <br> tag will be

<!-- HTML -->
<br/>

The page will have this styling

height: auto;
line-height: normal;
max-height: none;
min-height: 0px;

The height of that a <br> tag represents is inherited from the styling of it's parent container. Thus if it is nested within a paragraph; the <br> will equal the height of 1 line of text based on the line-height and font-size of that paragraph.

<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>

I now have an empty page but the page is 10 pixels tall because I specified that the paragraph should be 10 pixels and even though the paragraph is essentially empty, it's not empty because I have a break. Thus the break is equivalent to the height of 1 line of text.

The current CSS1 properties and values cannot describe the behavior of the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat ‘BR’ specially. - Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements

---

An appropriate solution would be to separate the upper and lower block into two containers (<p>) and set a margin between the two blocks. If you use a <p> tag you can style the space between paragraphs without adding unwanted space to the top paragraph like this..

// CSS
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.

Or merely adjust the line-height of the text if you don't mind the space between every other line increasing as well

You could potentially also find the pseudo-selector ::first-line useful.

---

Though I can't fathom why; I do believe in the fact that there can at times always be a good reason to break the rules.. If you absolutely positively are deadset on styling the <br> wrap it in a container and set the line-height of the container.

<div style="line-height:50px;"><br></div>