Menu
<br> is a line break. It doesn't have a height, it just breaks the line. Doesn't replacing mean, removing the element?
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 .
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.
<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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With