What Is The Alternative To
If I Want To Control The Height Between ...

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs What is the alternative to <br /> if I want to control the height between lines? Ask Question Asked 12 years, 7 months ago Modified 2 years, 10 months ago Viewed 113k times 30

In following example:

Line1 <br /> Line2

I'm using <br /> to force Line2 to go to next line, but as far as I know there is no cross browser friendly way of setting the height of br. What is an alternative method I could use?

• html
• css

Share Improve this question Follow edited Jun 12, 2012 at 12:01 James Allardice 166k2222 gold badges334334 silver badges315315 bronze badges asked Jun 12, 2012 at 12:00 DavidWDavidW 5,1191414 gold badges4747 silver badges7070 bronze badges 5

• 1 why did u exclude to wrap the text in several <p /> elements? – Kralizek Commented Jun 12, 2012 at 12:03
• "there is no cross browser friendly way of setting the height of br" That's because <br> doesn't have any height. It's just a command to create a new line. – Cthulhu Commented Jun 12, 2012 at 12:05
• Use padding, margins or line height. – SVS Commented Jun 12, 2012 at 12:05
• 1 are the Line1, Line 2 etc connected? You might be better with a <ul> & <li> tag if there is a semantic link between the Lines – atmd Commented Jun 12, 2012 at 12:06
• most answers are correct, it depends on the context of the question – Stuart Commented Jun 12, 2012 at 12:07

Add a comment |

7 Answers 7

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 30

Use differents blocks :

<p>Line1</p> <p>Line2</p> Share Improve this answer Follow answered Jun 12, 2012 at 12:03 GuillaumeSGuillaumeS 1,67811 gold badge1515 silver badges1515 bronze badges Add a comment | 11

Normally, using <br /> is old way of breaking a line. You should use <p>, <div> or some block level elements and give them top or bottom margins.

p { margin-top:5px; margin-bottom:5px } Share Improve this answer Follow answered Jun 12, 2012 at 12:04 AshwinAshwin 12.4k2222 gold badges8484 silver badges119119 bronze badges Add a comment | 5

Using CSS you can control the line-height property of any element.

someElement { line-height:12px; }

Now you may simply set this for an element, or use it on the entire HTML to provide uniformity across the document. This is safe, cross-browser compatible and easy to use.

Share Improve this answer Follow edited Jun 12, 2012 at 12:11 thirtydot 228k4949 gold badges392392 silver badges353353 bronze badges answered Jun 12, 2012 at 12:01 DigitalisDigitalis 57022 silver badges1212 bronze badges 0 Add a comment | 3

You can use css line-height property along with <br/> tag to control spacing between lines.

<style> .small { line-height:100px; } </style> <p class="small"> This is a paragraph with a smaller line-height.<br /> This is a paragraph with a smaller line-height.<br /> This is a paragraph with a smaller line-height.<br /> This is a paragraph with a smaller line-height.<br /> </p> Share Improve this answer Follow answered Jun 12, 2012 at 12:06 Ravi JainRavi Jain 1,48222 gold badges1717 silver badges4141 bronze badges Add a comment | 2

1. I add a <div>, best way for me, with CSS margin. Or,
2. The <p> tag.

Share Improve this answer Follow answered Dec 18, 2014 at 21:24 Syed PriomSyed Priom 2,00711 gold badge2222 silver badges2222 bronze badges Add a comment | 1

Use padding & / or margin css attributes.

Share Improve this answer Follow answered Jun 12, 2012 at 12:02 yogiyogi 19.6k1313 gold badges6464 silver badges9393 bronze badges Add a comment | 0

You can add a <div> like this

<div style="height: [put your height here]; display: block;"></div>

Seems to work for me, as shown here:

<span>This is the previous line!</span> <div style="height: 50px; display: block;"></div> <span>This will be 50 pixels below the previous line.</span>

You can even use a span! <span>This is the previous line!</span> <span style="height: 50px; display: block;"></span> <span>This will be 50 pixels below the previous line.</span>

Share Improve this answer Follow edited Aug 22, 2021 at 21:39 answered Aug 22, 2021 at 21:32 Missing UserMissing User 11177 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• html
• css

or ask your own question.

• The Overflow Blog
• How AI apps are like Google Search
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

-5 Alternative of using <br> in several lines 6 Cursor in contenteditable not behaving properly in Chrome 0 Another way of line break through css without using br?

Related

23 Make new line without using <br> in HTML 4 How to set the space between lines in a div without setting line height 0 HTML:Adjust height between br element 5 Controlling the line-height of a <br> tag within a heading tag? 0 Why the <br> element has more height than line-height 7 How to adjust the amount of space between two lines at each <br> in CSS? 2 HTML/CSS -lineheight is affecting <br> tag? 1 how do you shorten a breaks line height in html? 0 How to use 'line-height' without increasing size of <span> 1 Control the space the <br> tag gives html/css

Hot Network Questions

• Are there any languages without adpositions?
• What's left of wine or vodka after the water and alcohol is boiled off?
• If God is good, why does "Acts of God" refer to bad things?
• Why is pattern recognition not racism?
• Trying to find a middle grade book about a boy finding his way back to his reality/universe after he's taken away from it
• On iOS, can I move or copy data from the Notes.app to the Files.app?
• How does FM preemphasis interact with maximum deviation?
• Implement a hamiltonian simulation on a diagonal matrix?
• Free Kei Friday
• Non-closable unbounded operators
• How was 煞 created from 殺?
• Image of the entire function
• Algebraic equation to represent a triangle.
• QGIS labeling: Why do we need a primary key for the auxiliary storage?
• The MC dies a few years after an apocalypse, but wakes up years earlier, just days before it starts. Uses his knowledge to gain skills faster
• Does gravity from a star go through a black hole's event horizon to affect objects on the other side?
• Hardy's ratings of mathematicians
• Is there a cause of action for intentionally destroying a sand castle someone else has built on a public beach?
• Publication in a journal that has now disappeared entirely. Can I publish the paper elsewhere?
• Understanding the benefit of non principal repayment loan
• wp-config debug 'false' or 'true'
• A world with limited collective ability
• Varying output from single file
• Why was "the barn" "every bit as good" in "Wuthering Heights"?

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html