Vertical alignment for two inline-block elements not working as expected

Question

In the code below, why do I need to set vertical-align: top to both elements to close the gap between them? If the gap occurs on the first element only, can't I just set that to vertical-align: top to close the gap?

Here is what occurred if I assign vertical-align property to only .test :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
       body{
           width: 100vw;
           height: 100vh;
           margin: 0;
           background-color: black;
       }

        .test {
            vertical-align: top;
            display: inline-block;
            width: 10%;
            height: 100px;
            background-color: lightblue;
        }


        hr{
            display: inline-block;
            width: 100%;
            border: thick solid lightgreen;
            margin: 0;
        }

    </style>
</head>
<body>
    <div class = "test"></div><hr/>
</body>
</html>

This is what happened when I assign vertical-align to both elements:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
       body{
           width: 100vw;
           height: 100vh;
           margin: 0;
           background-color: black;
       }

        .test {
            vertical-align: top;
            display: inline-block;
            width: 10%;
            height: 100px;
            background-color: lightblue;
        }


        hr{
            display: inline-block;
            width: 100%;
            border: thick solid lightgreen;
            margin: 0;
            vertical-align: top;
        }

    </style>
</head>
<body>
    <div class = "test"></div><hr/>
</body>
</html>

*aligned with the top of the tallest element on the line.* --> you missed the last part *on the line*. The logic you are talking about apply if both are in the same line. In your case each one is inside a different line — Temani Afif, Aug 25 '20 at 22:08
How will this property be handled given that they are in separate lines? — Robert0000, Aug 25 '20 at 22:11
Use a grid or flexbox to achieve what you want. Just because you place a div box into the same line as another div box, doesnt mean that they will technically speaking in the same line on the screen. Actually they will below each other. — tacoshy, Aug 25 '20 at 22:15
@TemaniAfif I am still baffled by why is it necessary to set vertical-align: top to both elements (rather than one) to close the gap between them. — Robert0000, Aug 26 '20 at 01:39
due to the nature of inline-block element, read this: https://stackoverflow.com/q/5804256/8620333 — Temani Afif, Aug 26 '20 at 08:32
@TemaniAfif I have read your answers and the links you sent me. However, in this case, aren't the two divs (displayed inline-block) are in separate line boxes? Since vertical-align works on elements on the same line, which they aren't, setting both of them to "vertical-align: top" does not make any sense to me. — Robert0000, Aug 26 '20 at 13:24
yes every element is inside its own line and vertical-align will align inside that line ... the issue is that the default alignment is baseline. Read the last link to understand that by default you have space under the inline-block that you remove by changing the alignment and still each one inside its line — Temani Afif, Aug 26 '20 at 13:27
and in your example you don't need to vertical-align to both, only the first one is enough since the space is below the first one. There is nothing below the second element to notice the space — Temani Afif, Aug 26 '20 at 13:28
@TemaniAfif Could you also please explain scenario(s) where it is necessary to use vertical-align on both elements to close the gap? I have edited the snippets above. — Robert0000, Aug 26 '20 at 13:58
@TemaniAfif Thank you for your detailed explanation, it seems that I have mistaken and mixed up many similar concepts. Now the issue has been resolved. — Robert0000, Aug 26 '20 at 14:35
Are you sure the answer you accepted explain your issue? I don't see how ... it doens't explain the gap and why it's different in both cases and why you need vertical-align for both element to close the gap and not only the first one — Temani Afif, Aug 26 '20 at 14:40
@TemaniAfif I can't thoroughly explain this behavior, but knowing that vertical-align: top removes the gap that baseline doesn't might give me some hope... despite that, as you mentioned, the elements have line boxes equal to the line height. — Robert0000, Aug 26 '20 at 15:40

score 0 · Answer 1 · answered Jun 17 '21 at 14:24

Anytime you are working with inline, inline-block, or table elements you will need to worry about vertical-align. As Arbin Shrestha said, the default value is baseline. What I don't understand is why you are using inline-block on both of these values anyway. The hr is full width, so changing the display property seems unnecessary.

If you are going to align multiple of those .test blue blocks in the top line, then set them all as display: inline-block; vertical-align: top;, but you shouldn't need to change the display value for the hr. If you leave the hr tag with its default display: block; value, then it should line up without messing with vertical-align and width. I hope that's what you're looking for. See here:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
       body{
           width: 100vw;
           height: 100vh;
           margin: 0;
           background-color: black;
       }

        .test {
            vertical-align: top;
            display: inline-block;
            width: 10%;
            height: 100px;
            background-color: lightblue;
        }


        hr{
            border: thick solid lightgreen;
            background-color: lightgreen;
            margin: 0;
        }

    </style>
</head>
<body>
    <div class = "test"></div>
    <div class = "test"></div>
    <div class = "test"></div>
    <hr/>
</body>
</html>

score -1 · Answer 2 · edited Jun 21 '21 at 07:14

-1

That is because all inline-block and inline elements have the "vertical-align" property set to "baseline" by default.

Look here for more details:

https://css-tricks.com/almanac/properties/v/vertical-align

edited Jun 21 '21 at 07:14

McKay Whiting

152
11

answered Aug 26 '20 at 14:19

Arbin Shrestha

155
1
7

Thank you for the response. – Robert0000 Aug 26 '20 at 14:36

Vertical alignment for two inline-block elements not working as expected

2 Answers2

Linked