Line height on inline-block div pushing down other inline-block siblings

Question

I am experimenting with the line-height property, and read from MDN that:

On non-replaced inline elements, it specifies the height that is used to calculate line box height.

However, in the case below, I set the line-height on .one but it is affecting the height of all other divs as well. Why is this happening?

Before setting the line-height property to .one:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
       body{
           margin: 0;
           padding: 0;
       }

        .container {
            position: absolute;
            left: 25%;
            top: 30%;
            border: thick solid grey;
            width: 50vw;
            line-height: 100px;
        }
        .item {
            width: 100px;
            height: 100px;
            margin: 10px;
            color: white;
            display: inline-block;
            border: thick solid black;
            
         
        }

        #one {
            background-color: red;
            color: black;
            
        }
        #two {
            background-color: green;
            width: 150px;
            height: 150px;
        }
        #three {
            background-color: lightblue;
            width: 50px;
            height: 50px;
        }
        #four {
            background-color: coral;
            width: 20px;
            height: 300px;
           
        }
       #five{
           background-color: grey;
           width: 160px;
           height: 180px;
          
       }
   

    </style>
</head>
<body>
    <div class="container">
        <div id="one" class="item">A</div>
        <div id="two" class="item">B</div>
        <div id="three" class="item">C</div>
        <div id="four" class="item">D</div>
        <div id="five" class="item">E</div>
    </div>
  
</body>
</html>

After setting the line-height property on .one:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
       body{
           margin: 0;
           padding: 0;
       }

        .container {
            position: absolute;
            left: 25%;
            top: 30%;
            border: thick solid grey;
            width: 50vw;
            line-height: 100px;
        }
        .item {
            width: 100px;
            height: 100px;
            margin: 10px;
            color: white;
            display: inline-block;
            border: thick solid black;
            
         
        }

        #one {
            background-color: red;
            color: black;
            line-height: 200px
        }
        #two {
            background-color: green;
            width: 150px;
            height: 150px;
        }
        #three {
            background-color: lightblue;
            width: 50px;
            height: 50px;
        }
        #four {
            background-color: coral;
            width: 20px;
            height: 300px;
           
        }
       #five{
           background-color: grey;
           width: 160px;
           height: 180px;
          
       }
   

    </style>
</head>
<body>
    <div class="container">
        <div id="one" class="item">A</div>
        <div id="two" class="item">B</div>
        <div id="three" class="item">C</div>
        <div id="four" class="item">D</div>
        <div id="five" class="item">E</div>
    </div>
  
</body>
</html>

@epascarello I am not trying to align the divs, but rather curious why the line-height property on the "div class = 'one'" affects the position of its siblings? — Robert0000, Aug 31 '20 at 00:12
the duplicate added by @epascarello is still relevant and is what you need to understand the issue. The key is *in this case, the default value of the vertical-align property is baseline*. The baseline alignment explain everything ... not sure how the bottom answer you accepted explain your issue. it's irrelevant to not say wrong — Temani Afif, Aug 31 '20 at 09:38
the figure here: https://stackoverflow.com/a/31063197/8620333 illustrate everything — Temani Afif, Aug 31 '20 at 09:40
@TemaniAfif Yes you're right, I keep forgetting about vertical-align: baseline... ugh! — Robert0000, Aug 31 '20 at 12:48
@TemaniAfif I saw from the link that this property in its default "Aligns the baseline of the box with the baseline of the parent box." In this case, I have two siblings. Does this mean that the "baseline of the parent box" is actually the next element that has the tallest line-height? Thank you. — Robert0000, Aug 31 '20 at 13:14
to make it easy, see the text and you will notice that the alignment of all the blocks match their text content (all the letters are in the same vertical line) --> this is the baseline alignment and the baseline of each element is defined by its text inside. Line-height here is a factor that affect the text placement which will logically move the baseline of the elements. Read the second duplicate for more details in order to udnerstand how we identify the baseline of each element — Temani Afif, Aug 31 '20 at 13:21
@TemaniAfif I think I am finally getting the idea. Thank you very much for helping me from the start. I'll send you a gift :) — Robert0000, Aug 31 '20 at 14:15
welcome, don't hesitate to message me if you need more help ;) — Temani Afif, Aug 31 '20 at 14:21

score -2 · Accepted Answer · answered Aug 31 '20 at 00:50

The line-height is affecting all other siblings becuase they have display: inline-block applied to them, meaning they should be 'inline' with each other.

When setting a line-height it's increasing the line height for all elements sharing the same line; if you were to change your .item css display property to a block level element you will notice the line height will then not affect it's siblings as they don't share the same 'line'.

Line height on inline-block div pushing down other inline-block siblings

1 Answers1