How to change height of a <br>?

Question

I have a big paragraph of text that is divided into subparagraphs with <br>'s:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

I want to widen the gap between these subparagraphs, like there is two <br>'s or something like that. I know that the right way to do this is to use <p></p>, but right now I cannot change this layout, so I am looking for CSS-only solution.

I've tried setting <br>'s line-height and height with display: block, I also googled and stackoverflow-ed briefly, but did not find any solution. Is this even possible without changing the layout?

Answer 1

Hi,

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

Answer 2

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.

Answer 3

<br /> will take as much space as text-filled row of your <p>, you can't change that. If you want larger, it means you want to separate into paragraph, so add other <p>. Don't forget to be the most semantic you can ;)

Answer 4

Michael and yoda are both right. What you can do is use the <p> tag, which, being a block tag, uses a bottom-margin to offset the following block, so you can do something similar to this to get bigger spacing:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Another alternative is to use the block <hr> tag, with which you can explicitly define the height of the spacing.

Answer 5

you could also use the "block-quote" property in CSS. That would make it so it doesn't effect your individual lines but allows you to set parameters for just the breaks between paragraphs or "block quotes".

UPDATE:
I stand corrected. "blockquote" is actually a html property. You use it just like < p > and < /p > around your work. You could then set the parameters for your block quote in css like

blockquote { margin-top: 20px }

Hope this helps. It is similar to setting the parameters on the br and may or may not be cross browser compatible.

Answer 6

Css:

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

It's a very, very dirty solution (and probably not even cross-browser compatible), but it's something at least.

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

Answer 7

I haven't tried the :before/:after CSS2 pseudo-element before, mainly because it's only supported in IE8 (this concerning IE browsers). This could be the only possible CSS solution:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Here is an example on QuirksMode.

Answer 8

I had a thought that you might be able to use:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

But that didn't work on chrome or firefox.

Just thought I'd mention that in case it occurred to anyone else and I'd save them the trouble.

Answer 9

The closest thing to br is div. you can use this:

<div style="margin-top:20px;" />

Define using CSS class

To make a general style, use class:

Style def:

div.br
{
  margin-top:20px;
}

Usage (replace your <br/> tags with this):

<div class="br" />

Define your own tag...

This does not work in IE7, but it works in FF, Chrome and Opera (not tested others)

Style def:

break
{
  display:block;
  margin-top:20px;
}

Usage (replace your <br/> tags with this):

<break />