How to change line height of
and elements?

Question

The code below puts extra space between some text and again some text.

Why is the <br> element between some text and again some text not getting 0 height. I tried both line-height: 0 and height: 0.
The second span element's text in not taking 20px line-height, why?

Note: Please do not tell how to solve the problem. I only want to know why line-height works on inline elements like span this way.

.container {
  border: 1px solid black;
}
.one {
  line-height: 12px;
  font-size: 10px;
  vertical-align: top;
}
.two {
  line-height: 20px;
  vertical-align: bottom;
  font-size: 10px;
}
br {
  line-height: 0;
  height: 0;
  display: block;
}

<div class="container">
  <span class=one>
    some text <br>
    agian some text <br>    
  </span>
  
  <span class="two">
    hip hop
  </span>
  
</div>

Pugazh · Answer 1 · 2016-05-12T09:36:25.110

0

span is an display:inline element, you might need display: inline-block to see your changes.

Check below:

.container {
  border: 1px solid black;
}
.one {
  display: inline-block;
  line-height: 12px;
  font-size: 10px;
  vertical-align: top;
  background-color: grey;
}
.two {
  display: table-cell;
  height: 30px;
  vertical-align: bottom;
  font-size: 10px;
  background-color: red;
}
br {
  line-height: 0;
  height: 0;
  display: block;
}

<div class="container">
  <span class=one>
    some text <br>
    agian some text <br>    
  </span>
  <br>
  <span class="two">
    hip hop
  </span>

</div>

edited May 12 '16 at 09:36

answered May 12 '16 at 08:00

Pugazh

9,453
5
33
54

What is wrong with `inline` elements? Doesn't line-height work on inline elements? And how to vertically align bottom the red hip hop text? – user31782 May 12 '16 at 08:04
@user31782 : You can use `height` instead of `line-height` and `display: table-cell` to vertically align the element in bottom. Check the updated answer – Pugazh May 12 '16 at 09:36

score -2 · Answer 2 · edited May 23 '17 at 12:16

-2

You shouldn't style <br> tag but if you want know why check it here

How to change line height of and elements?

2 Answers2

How to change line height of
and elements?