'letters won't transform without `inline-block` property [duplicate]

Currently working this project but was stuck on the letter transitioning. (code). For simplicity sake I will only have the relevant code for letter effect.

.form-control label span {
    display: inline-block;
    min-width: 5px;
    font-size: 18px;
    transition: .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control input:focus + label span,
.form-control input:valid + label span {
    transform: translateY(-30px);
    color: lightblue
}
<div class="form-control">
    <input type="text" required>
    <label>
        <span style="transition-delay:0ms;">E</span>
        <span style="transition-delay:50ms;">m</span>
        <span style="transition-delay:100ms;">a</span>
        <span style="transition-delay:150ms;">i</span>
        <span style="transition-delay:200ms;">l</span>
    </label>
</div>

My Question is why does the .form-control label span need to have the display: inline-block property to actually have the letters transform: translateY(-30px)? When it the inline-block is not present, the letters do not move at all.

Thanks for the help in advance for understanding this.

htmlcss


Solution 1:[1]

It's because the default display of a span is inline, so it's not considered as a block.

Also, you can not use the transform property on an inline element, it should be used on a block or inline-block.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Julian

Related Questions