How to change the height of br tag?
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.
-
Below is the implementation of this approach:
- Example-1:
<!DOCTYPE html ><html><head><title>Customized break example</title><styletype="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 differentbreak height between lines</h3><p> Hi User<spanclass="brlarge"></span>Welcome to<spanclass="brmedium"></span>Geeks for geeks.<spanclass="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><styletype="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 differentbreak height between</h2><p>Hi User<spanclass="br"></span>Welcome to<spanclass="brsmall"></span>Geeks for geeks.<spanclass="brxsmall"></span>Hope you have enjoyed your stay.</p></body></html>Output:
- Example-3:
<!DOCTYPE html ><html><head><title>Customized break example</title></head><body><center><h2>This page showsdifferent breakheight between</h2><p>GeeksforGeeks<brstyle="line-height:40px"> Acomputer science portal.</p></center></body></html>Output:
Method-2: Use inline css in <br> tag to change the height of br tag.
Please Login to comment...