2

In MDN line-height: <number> means:

The used value is this unitless <number> multiplied by the element's own font size. The computed value is the same as the specified <number>. In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.

.parent {
    border:1px solid red;
    line-height: 4;
    font-size: 14px; 
}

4 * 14px = 56px

It is equal to the below.

.parent {
    border:1px solid red;
    line-height: 56px;
    font-size: 14px; 
}


* {
  margin: 0px;
  padding: 0px;
}

.parent {
  border: 1px solid red;
  line-height: 4;
  font-size: 14px;
}

.child {
  font-size: 30px;
  vertical-align: bottom;
  border: 1px solid red;
}

.inline-block {
  display: inline-block;
  vertical-align: bottom;
}

.other {
  border: solid 1px green;
}
<span class="parent">char in parent
  <span class="child">
    <span class="inline-block">display:inline-block</span> char in child
</span>
</span>
<div class="other">other</div>

Let's change line-height:4 into line-height:56px. 

* {
  margin: 0px;
  padding: 0px;
}

.parent {
  border: 1px solid red;
  line-height: 56px;
  font-size: 14px;
}

.child {
  font-size: 30px;
  vertical-align: bottom;
  border: 1px solid red;
}

.inline-block {
  display: inline-block;
  vertical-align: bottom;
}

.other {
  border: solid 1px green;
}
<span class="parent">char in parent
  <span class="child">
    <span class="inline-block">display:inline-block</span> char in child
</span>
</span>
<div class="other">other</div>

Why there are different appearances?

line-height:4; line-height:56px;

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
showkey
  • 482
  • 42
  • 140
  • 295
  • I can only comment because I don't recall all the ins and outs but if you read the CSS specification you'll see that it deals with line boxes, which you'll need an understanding of, and the difference with block level versus inline content. It can seem convoluted but slow careful study will explain this: https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height A key phrase in your quote is "avoid unexpected results due to inheritance." – Rob Jul 02 '17 at 01:04
  • 1
    Of all answers in the dupes, this one may be the most relevant to this post: https://stackoverflow.com/a/12304722/3597276 – Michael Benjamin Jul 02 '17 at 02:31

0 Answers0