Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the height of a <br>?

Tags:

html

css

People also ask

What is the height of Br?

<br> is a line break. It doesn't have a height, it just breaks the line. Doesn't replacing mean, removing the element?

Can you style a br?

Technically, yes, you can target a <br> element with CSS directly or by applying a class to it and targeting the class. That being said, a <br> generates a line-break and it is only a line-break. As this element has no content, there are only few styles that make sense to apply on it, like clear or position .

How do I change the height of a line in HTML?

It turns out that's pretty simple: just use the line-height CSS property and then apply it. I have an example below. Then, you can apply that CSS class to your HTML. Now, the space between the lines changes.

What does br /> mean in HTML?

<br>: The Line Break element. The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.


Css:

br {
   display: block;
   margin: 10px 0;
}

The solution is probably not cross-browser compatible, but it's something at least. Also consider setting line-height:

line-height:22px;

For Google Chrome, consider setting content:

content: " ";

Other than that, I think you're stuck with a JavaScript solution.


Here is the correct solution that actually has cross-browser support:

  br {
        line-height: 150%;
     }

So, peeps above have got basically a similar answer, but here it is very succinctly. Works in Opera, Chrome, Safari & Firefox, most likely IE too?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Another way is to use an HR. But, and here's the cunning part, make it invisible.

Thus:

<hr style="height:30pt; visibility:hidden;" />

To make a cleaner BR break simulated using the HR: Btw works in all browsers!!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

I just had this problem, and I got around it by using

<div style="line-height:150%;">
    <br>
</div>

As far as I know <br> does not have a height, it merely forces a line break. What you have is a text with some line breaks in addition to the auto-wrap ones, not subparagraphs. You can change the line spacing, but that will affect all lines.


you can apply line-height on that <p> element, so lines become larger.