How to change the height of br tag? - GeeksforGeeks

30 Apr, 2019
You can’t change the height of <br> tag as its not an HTML element, it is just an instruction which enforces a line break.br does not take up any space in the page.
There is a way by which you can increase line break between lines, is by putting multiple br tags.
Another way is to use classed span tag and apply the style to them, to get desired output
Method-1: Use various span classes with a different style applied to them, you can change the value of “margin-bottom” for these classes to change the height of line break.
Example-1:<!DOCTYPE html ><html>  <head>    <title>      Customized break example  </title>      <style type="text/css">        .br {            display: block;            margin-bottom: 0em;        }                  .brmedium {            display: block;            margin-bottom: 1em;        }                  .brlarge {            display: block;            margin-bottom: 2em;        }    </style></head>  <body>      <h3>This page shows different       break height between lines</h3>    <p> Hi User      <span class="brlarge"></span>      Welcome to      <span class="brmedium"></span>       Geeks for geeks.      <span class="br"></span>       Hope you have enjoyed your stay.    </p>    </body>  </html>Output:
<!DOCTYPE html ><html>  <head>    <title>      Customized break example  </title>      <style type="text/css">        .br {            display: block;            margin-bottom: 0em;        }                  .brmedium {            display: block;            margin-bottom: 1em;        }                  .brlarge {            display: block;            margin-bottom: 2em;        }    </style></head>  <body>      <h3>This page shows different       break height between lines</h3>    <p> Hi User      <span class="brlarge"></span>      Welcome to      <span class="brmedium"></span>       Geeks for geeks.      <span class="br"></span>       Hope you have enjoyed your stay.    </p>    </body>  </html>
Output:
Example-2: You can also decrease break height less than normal height by using negative bottom-margin for the span classes.<!DOCTYPE html ><html>  <head>    <title>      Customized break example  </title>      <style type="text/css">        .br {            display: block;            margin-bottom: 0em;        }                  .brsmall {            display: block;            margin-bottom: -.2em;        }                  .brxsmall {            display: block;            margin-bottom: -.4em;        }    </style></head>  <body>      <h2>This page shows different       break height between</h2>        <p>Hi User      <span class="br"></span>       Welcome to      <span class="brsmall"></span>      Geeks for geeks.      <span class="brxsmall"></span>      Hope you have enjoyed your stay.    </p>    </body>  </html>Output:Method-2: Use inline css in <br> tag to change the height of br tag.
<!DOCTYPE html ><html>  <head>    <title>      Customized break example  </title>      <style type="text/css">        .br {            display: block;            margin-bottom: 0em;        }                  .brsmall {            display: block;            margin-bottom: -.2em;        }                  .brxsmall {            display: block;            margin-bottom: -.4em;        }    </style></head>  <body>      <h2>This page shows different       break height between</h2>        <p>Hi User      <span class="br"></span>       Welcome to      <span class="brsmall"></span>      Geeks for geeks.      <span class="brxsmall"></span>      Hope you have enjoyed your stay.    </p>    </body>  </html>
Output:
Method-2: Use inline css in <br> tag to change the height of br tag.
Example-3:<!DOCTYPE html ><html>  <head>    <title>        Customized break example    </title></head>  <body>    <center>        <h2>This page shows         different break         height between    </h2>          <p>GeeksforGeeks<br style=        "line-height:40px"> A          computer science portal.</p>    </center></body>  </html>Output:
<!DOCTYPE html ><html>  <head>    <title>        Customized break example    </title></head>  <body>    <center>        <h2>This page shows         different break         height between    </h2>          <p>GeeksforGeeks<br style=        "line-height:40px"> A          computer science portal.</p>    </center></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Misc
HTML-Tags
Picked
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript