How to change the height of a <br>?

user_155336 0
Viewed 716481

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 Stack Overflow-ed briefly, but did not find any solution. Is this even possible without changing the layout?

css html
34 Answers

I know this is an old question however for me it worked by actually using an empty paragraph with margins:

<p class="" style="margin: 4px;"></p>

Increasing or decreasing the margin size will increase or decrease the distance between elements just like a border would do but adjustable.

On top of that, it is browser compatible.

user_44905620

Using some HTML in markdown, having to force <br>s in a list that resulted too cramped, none of the given solutions worked as desired (at least in my setup)

ended up with

<div style="height:10px;font-size:10px;">&nbsp;</div>

I've found it here, extremely close to dorogz suggestion. Of course for standard needs CSS is better

user_154463110

Instead of

<br>,<br/>,<hr> or <span></span> and trying different CSS properties to these tag.

I did, I put paragraphs inside a div and gave it line-height:2px

#html

<div class="smallerlineHeight">
   <p>Line1</p>
   <p>Line2</p>
</div>

#css

.smallerlineHeight {
    p {
        line-height: 2px;
    }
}
user_89951780

Answering on a more general level for anyone who landed here as they are fixing problems in spacing caused by the <br> tag. I have to do a lot of resets in order to get close to pixel perfect. 

br {
    content: " ";
    display: block;
}

For the specific issue I was addressing I had to have a specific space between the lines. I added a margin to the top and bottom.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}
user_11200270

May be using two br tags is the simplest solution that works with all browsers. But it is repetitive. 

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>
user_22917880

How about just adding a paragraph instead of the line break like so

bla la la bla bla abla la la bla bla abla la la bla bla a

bla la la bla bla abla la la bla bla abla la la bla bla a

bla la la bla bla abla la la bla bla abla la la bla bla a

Then you can specify the lineheight or padding or whatever for that p

user_72122320
Related