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'

aaaaaaaaaaaaaaaaaaaaaa

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

aaaaaaaaaaaaaaaaaaaaaa

the code below shows the two kinds of appearance




    
    
    Document


    
    
        aaaaaaaaaaaaaaaaaaaaaa        
    
          
        aaaaaaaaaaaaaaaaaaaaaa

user_8620333 · Answer

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;
}


  aaaaaaaaaaaaaaaaaaaaaa


  aaaaaaaaaaaaaaaaaaaaaa

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;
}


  aaaaaaaaaaaaaaaaaaaaaa


  aaaaaaaaaaaaaaaaaaaaaa

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

1 Answers