Change br height using CSS

Question

I have seen a question here about the same  but I can t get any of the answers to work  at least on Chrome     This question is only for  lt br gt   I know plenty of other techniques to change the height but in this case I can t change the HTML   bla lt BR gt  lt BR gt bla lt BR gt bla lt BR gt  lt BR gt bla   CSS   br       display  block      margin-bottom  2px      font-size 2px      line-height  2px      Desired effect  smaller inter-line height    The only thing I can get to work is display none  but then all line break are removed   Here s a fiddle for it using some of the techniques  but see that it renders the exact same as without any CSS

User · Answer

As the  margin  doesn t work in Chrome  that s why I used  border  instead   br     display  block    content        border-bottom  10px solid transparent     Works in Chrome Safari    -moz-document url-prefix       br       margin-bottom  10px     As  border-bottom  doesn t work in firefox and  margin-bottom  doesn t work in Chrome Safari

User · Answer

Take a look at the line-height property   Trying to style the  lt br gt  tag is not the answer   Example    lt p id  single-spaced  gt      This lt br gt      text lt br gt      is lt br gt      single-spaced   lt  p gt   lt p id  double-spaced  style  line-height  200    gt      This lt br gt      text lt br gt      is lt br gt      double-spaced   lt  p gt

User · Answer

The line height of the  lt br gt  can be different from the line height of the rest of the text inside a  lt p gt    You can control the line height of your  lt br gt  tags independently of the rest of the text by enclosing two of them in a  lt span gt  that is styled   Use the line-height css property  as others have suggested    lt p class  normalLineHeight  gt    Lots of text here which will display on several lines with normal line height if you put it in a narrow container       lt span class  customLineHeight  gt  lt br gt  lt br gt  lt  span gt    After a custom break  this text will again display on several lines with normal line height     lt  p gt

User · Answer

The line height of the br tag can be different from the line height of the rest of the text inside a paragraph text by setting font-size for br tag   Example  br   font-size  200

User · Answer

You can control the  lt br gt  height if you put it inside a height limited div  Try    lt div style  height 2px   gt  lt br gt  lt  div gt

User · Answer

lt font size  4  gt   lt font color   ffe680  gt something here lt  font gt  lt br gt    I was trying all these methods but most didn t work properly for me  eventually I accidentally did this and it works great  it works on chrome and safari  the only things I tested on   Replace the colour code thing with your background colour code and the text will be invisible  you can also adjust the font size to make the line break bigger or smaller depending on your desire  It is really simple

User · Answer

Use the content property and style that content  Content behavior is then adjusted using pseudo elements  Pseudo elements   before and   after both work in Mac Safari 10 0 3    Here element br content is used as the element anchor for element br  after content  Element br is where br spacing can be styled  br  after is the place where br  after content can be displayed and styled  Looks pretty  but not a 2px  lt br gt    br   content      display  block  margin  1rem 0    br  after   content             content      space ignored     float  left  margin-right  0 5rem      The br element line-height property is ignored  If negative values are applied to either or both selectors to give vertical  lift  to br tags in display  then correct vertical spacing occurs  but display incrementally indents display content following each br tag  The indent is exactly equal to the amount that lift varies from actual typographic line-height  If you guess the right lift  there is no indent but a single pile-up line exactly equal to raw glyph height  jammed between previous and following lines   Further  a trailing br tag will cause the following html display tag to inherit the br after content styling  Also  pseudo elements cause  lt br gt   lt br gt  to be interpreted as a single  lt br gt   While pseudo-class br active causes each  lt br gt  to be interpreted separately  Finally  using br active ignores pseudo element br after and all br active styling  So  all that s required is this   br active       which is no help for creating a 2px high  lt br gt  display  And here the pseudo class  active is ignored    br active   content      display  block  margin  1 25em 0    br   content      display  block  margin  1rem    br  after   content             content      space ignored     float  left  margin-right  0 5rem      This is a partial solution only  Pseudo class and pseudo element may provide solution  if tweaked  This may be part of CSS solution   I only have Safari  try it in other browsers    Learn web development  pseudo classes and pseudo elements  Pay attention to global elements - BR at Mozilla org

User · Answer

x000D   x000D   biglinebreakid   x000D    line-height  450   x000D       9x the normal height of a line break  x000D    x000D   biglinebreakclass   x000D    line-height  1em  x000D       you could even use calc  x000D    x000D  This is a small line x000D   lt br   gt  x000D  break  Whereas  this is a BIG line x000D   lt br   gt  x000D   lt br id  biglinebreakid    gt  x000D  break  You can use any CSS selectors you want for things like this line x000D   lt br   gt  x000D   lt br class  biglinebreakclass    gt  x000D  break  x000D   x000D   x000D

User · Answer

You can t change the height of the br tag itself  as it s not an element that takes up space in the page  It s just an instruction to create a new line   You can change the line height using the line-height style  That will change the distance between the text blocks that you have separated by empty lines  but natually also the distance between lines in a text block   For completeness  Text blocks in HTML is usually done using the p tag around text blocks  That way you can control the line height inside the p tag  and also the spacing between the p tags

User · Answer

This feels very hacky  but in chrome 41 on ubuntu I can make a  lt br gt  slightly stylable  br     content   quot  quot     margin  2em    display  block    font-size  24      I control the spacing with the font size   Update I made some test cases to see how the response changes as browsers update   x000D   x000D    outline  1px solid hotpink   div     display  inline-block    width  10rem    margin-top  0    vertical-align  top     h2     display  block    height  3rem    margin-top 0      old br     content        margin  2em    display  block    font-size  24     outline  red      just-font br     content        display  block    font-size  200      just-margin br     content        display  block    margin  2em      brbr br     content        display  block    font-size  100     height  1em    outline  red    display  block    x000D   lt div class  raw  gt     lt h2 gt Raw  lt code gt br lt  code gt rrrrs lt  h2 gt    bla lt BR gt  lt BR gt bla lt BR gt bla lt BR gt  lt BR gt bla  lt  div gt      lt div class  old  gt     lt h2 gt margin  amp  font size lt  h2 gt    bla lt BR gt  lt BR gt bla lt BR gt bla lt BR gt  lt BR gt bla  lt  div gt      lt div class  just-font  gt     lt h2 gt only font size lt  h2 gt    bla lt BR gt  lt BR gt bla lt BR gt bla lt BR gt  lt BR gt bla  lt  div gt     lt div class  just-margin  gt     lt h2 gt only margin lt  h2 gt    bla lt BR gt  lt BR gt bla lt BR gt bla lt BR gt  lt BR gt bla  lt  div gt       lt div class  brbr  gt     lt h2 gt  lt code gt br lt  code gt others vs only  lt code gt br lt  code gt s lt  h2 gt    bla lt BR gt  lt BR gt bla lt BR gt bla lt BR gt  lt BR gt bla  lt  div gt  x000D   x000D   x000D   They all have their own version of strange behaviour  Other than the browser default  only the last one respects the difference between one and two brs

User · Answer

The BR is anything but  extra-special   it is still a valid XML tag that you can give attributes to  For example  you don t have to encase it with a span to change the line-height  rather you can apply the line height directly to the element   You could do it with inline CSS   x000D   x000D  This is a small line x000D   lt br   gt  x000D  break  Whereas  this is a BIG line x000D   lt br   gt  x000D   lt br style  line-height 40vh   gt  x000D  break  x000D   x000D   x000D    Notice how two line breaks were used instead of one  This is because of how CSS inline elements work  Unfourtunately  the most awesome css feature possible  the lh unit  is still not there yet with any browser compatibility as of 2019  Thus  I have to use JavaScript for the demo below    x000D   x000D  addEventListener  load   function document  getComputedStyle   use strict   x000D    var allShowLineHeights   document getElementsByClassName  show-lh    x000D    for  var i 0  i  lt  allShowLineHeights length  i i 1 0    x000D      allShowLineHeights i  textContent   getComputedStyle  x000D        allShowLineHeights i  x000D        lineHeight  x000D      x000D    bind null  document  getComputedStyle    once  1  passive  1    x000D   show-lh  padding  0  25em  x000D   r  background   f77  x000D   g  background   7f5  x000D   b  background   7cf  x000D  This is a small line x000D   lt span class  show-lh r  gt  lt  span gt  lt br   gt  lt span class  show-lh r  gt  lt  span gt  x000D  break  Whereas  this is a BIG line x000D   lt span class  show-lh g  gt  lt  span gt  lt br   gt  lt span class  show-lh g  gt  lt  span gt  x000D   lt span class  show-lh b  gt  lt  span gt  lt br style  line-height 40vh   gt  lt span class  show-lh b  gt  lt  span gt  x000D  break  x000D   x000D   x000D    You can even use any CSS selectors you want like ID s and classes   x000D   x000D   biglinebreakid   x000D    line-height  450   x000D       9x the normal height of a line break  x000D    x000D   biglinebreakclass   x000D    line-height  1em  x000D       you could even use calc  x000D    x000D  This is a small line x000D   lt br   gt  x000D  break  Whereas  this is a BIG line x000D   lt br   gt  x000D   lt br id  biglinebreakid    gt  x000D  break  You can use any CSS selectors you want for things like this line x000D   lt br   gt  x000D   lt br class  biglinebreakclass    gt  x000D  break  x000D   x000D   x000D    You can find our more about line-height at the W3C docs   Basically  BR tags are not some void in world of CSS styling  they still can be styled  However  I would recommend only using line-height to style BR tags  They were never intended to be anything more than a line-break  and as such they might not always work as expected when using them as something else  Observe how even after applying tons of visual effects  the line break is still invisible    x000D   x000D   paddedlinebreak   x000D    display  block  x000D    width  6em  x000D    height  6em  x000D    background  orange  x000D    line-height  calc 6em   100    x000D    outline  1px solid red  x000D    border  1px solid green  x000D    x000D   lt div style  outline  1px solid yellow margin 1em display inline-block overflow visible  gt  x000D  This is a padded line x000D   lt br id  paddedlinebreak    gt  x000D  break  x000D   lt  div gt  x000D   x000D   x000D    A work-around for things such as margins and paddings is to instead style a span with a br in it like so    x000D   x000D   paddedlinebreak   x000D    background  orange  x000D    line-height  calc 6em   100    x000D    padding  3em  x000D    x000D   lt div style  outline  1px solid yellow margin 1em display inline-block overflow visible  gt  x000D  This is a padded line x000D   lt span id  paddedlinebreak  gt  lt br   gt  lt  span gt  x000D  break  x000D   lt  div gt  x000D   x000D   x000D    Notice how the orange blob above is the span that contains the br

[html] Change <br> height using CSS

Examples related to html

Examples related to css