Why the text in an element with "display:inline;line-height:0", still has different yAxis position in different rows?

Question

the height of the code below will beyond single line 'a'

<span style="display:inline;line-height:0;">aaaaaaaaaaaaaaaaaaaaaa</span>

the height of the code below will keep unchanged the same as the height of single line 'a'

<span style="display:inline-block;line-height:0;">aaaaaaaaaaaaaaaaaaaaaa</span>

the code below shows the two kinds of appearance

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .parent{
            border:1px solid red;
            margin:100px;
            width: 300px;    
        }
        .child1{
            display:inline;
            line-height:0;
            font-size: 50px;
            word-break: break-all;
        }
        .child2{
            display:inline-block;
            line-height:0;
            font-size: 50px;
            word-break: break-all;
        }       
    </style>
    <div class="parent">
        <span class="child1">aaaaaaaaaaaaaaaaaaaaaa</span>        
    </div>
    <div class="parent">      
        <span class="child2">aaaaaaaaaaaaaaaaaaaaaa</span>
    </div>
</body>
</html>

Does this answer your question? [CSS display: inline vs inline-block](https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block) — Reyno, Nov 02 '20 at 13:25
can you highlight the difference you are talking about? both snippet looks the same even if they don't really product the same output — Temani Afif, Nov 02 '20 at 13:29
@Reyno I don't think so, the key of my problem is the different behavior of line-height between 'inline' and 'inline-block' — Wilkin Wendy, Nov 02 '20 at 13:30
@TemaniAfif I have pasted my complete code，thanks for your helping — Wilkin Wendy, Nov 02 '20 at 13:45

Temani Afif · Accepted Answer · 2020-11-02T14:52:47.643

To get the same result you need to apply the same font-size and line-height to the parent container

.parent {
  border: 1px solid red;
  margin: 100px;
  width: 300px;
}

.child1 {
  display: inline;
  /*line-height:0;
   font-size: 50px;*/
  word-break: break-all;
}

.child2 {
  display: inline-block;
  line-height: 0;
  font-size: 50px;
  word-break: break-all;
}

<div class="parent" style="line-height:0;font-size: 50px;">
  <span class="child1">aaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<div class="parent">
  <span class="child2">aaaaaaaaaaaaaaaaaaaaaa</span>
</div>

When using inline-block you are considering the -block part to create a block element having text inside so you are applying the properties to the container (a block element) of the text (an inline element).

When using inline you are applying the properties to an inline elment inside a block element (the parent element)

So the main difference is that in one case, the parent block element is getting the styles and in the other it's the inline child element. To make sure both behave the same, the block parent element need to have the styles applied to it.

Here is a better visualization of the difference:

.box {
  border: 1px solid red;
  margin: 50px;
  width: 300px;
  word-break: break-all;
}

<div class="box" style="line-height:0;font-size: 50px;">
  <span >aaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<div class="box">
  <span style="line-height:0;font-size: 50px;">aaaaaaaaaaaaaaaaaaaaaa</span>
</div>

Thanks for your reply. But i'm still confused. in your first case ,why the inline element does not inherit the line-height(valued 0) of the parent `-block` part container — Wilkin Wendy, Nov 02 '20 at 16:06
@WilkinWendy there is no inheritence since you are applying the properties to the inline element not the parent. That's why you need to apply it to the parent so the inline element will inherit it and you have the same output as inline-block — Temani Afif, Nov 02 '20 at 16:10
Even more confused, as I know ,the line-height means the distance between different baseline,but in my second case ,the distance is obviously beyond 0,can you explain this? — Wilkin Wendy, Nov 02 '20 at 16:14
@WilkinWendy because we didn't set the line-height of the parent to be 0. This is the issue. Setting only the line-height of inline elements isn't enough. The line-height of the parent define the distance you are takling about. related question: https://stackoverflow.com/a/52283719/8620333 — Temani Afif, Nov 02 '20 at 16:18

Why the text in an element with "display:inline;line-height:0", still has different yAxis position in different rows?

1 Answers1