CODEWITHSUNDEEP
htmlcss
nonopolarity
nonopolarity

Reputation: 150996

How to style the br tag to have more space at the top and / or at the bottom?

This question aims to understand more about the <br> tag:

There is an HTML page that uses the following style to break the words into paragraphs:

<div>
    <br>200 words follows...
    <br>another 300 words...
    <br>
    <br>and 250 words...
</div>

I normally wouldn't style content this way, but would use the <p> ... </p> tag for each paragraph. But let's say we don't re-structure the document, but just use CSS to style the <br> tag so that each paragraph can have more empty space at the top (rather than none as the default), if just for the purpose of understanding the <br> more, how can that be done? (although <br> is somewhat a special element for line break, it should be style-able like other elements.)

Note that line-height won't work in this case, and in Chrome, it works differently than in Firefox on a Mac... it can be tried at http://jsfiddle.net/ff5SX/2/

On Chrome, only 2 consecutive <br> would give more space, and on Firefox, the behavior is weird and is harder to explain.

Upvotes: 1

Views: 6931

Answers (2)

Arup Hore
Arup Hore

Reputation: 1647

Please use the following for a vertical gap of specified size

CSS

div.verticalgap{clear:both;overflow:hidden;height:0px;}

HTML (for a 10px vertical gap)

<div class="verticalgap" style="height:10px"></div>

Upvotes: 0

Urban Bj&#246;rkman
Urban Bj&#246;rkman

Reputation: 2105

This article sums up your styling possibilities(or rather impossibilities) for the br tag

Can you target <br /> with css?

Upvotes: 7

Related Questions