inline-block span behaviors unexpectedly in HTML

Question

I wanted to make some spans placed next to each other, and I expected them to act like below:

So, I coded like below, and it worked just as I expected:

.block {
    background-color: aquamarine;
    display: inline-block;
    margin: 2vw;
    width: 20vw;
    height: 25vh;
}

<html>
<body>
        <span class="block">content1
        </span>
        <span class="block">content2
        </span>
        <span class="block">content3
        </span>
</body>
</html>

But, if span has no text inside, it moves upward a bit:

.block {
    background-color: aquamarine;
    display: inline-block;
    margin: 2vw;
    width: 20vw;
    height: 25vh;
}

<html>
<body>
        <span class="block">
        </span>
        <span class="block">content2
        </span>
        <span class="block">content3
        </span>
</body>
</html>

Also, if span has more than one line, it goes upward. As it have more lines, it goes upward further:

.block {
    background-color: aquamarine;
    display: inline-block;
    margin: 2vw;
    width: 20vw;
    height: 25vh;
}

<html>
<body>
        <span class="block">content1 content1 content1 content1 content1 content1 content1 content1 content1 content1 
        </span>
        <span class="block">content2
        </span>
        <span class="block">content3
        </span>
</body>
</html>

How can I get them not to move regardless of the length of their contents?

score 1 · Accepted Answer · answered Jul 15 '20 at 15:29

That's because the default vertical alignment for inline elements is baseline. Change it to middle or top to get what you want:

.block {
  background-color: aquamarine;
  display: inline-block;
  margin: 2vw;
  width: 20vw;
  height: 25vh;
  vertical-align:middle;
}

<span class="block">
        </span>
<span class="block">content2
        </span>
<span class="block">content3
        </span>

inline-block span behaviors unexpectedly in HTML

1 Answers1