Why is there an indent in span tag

Question

I wanted to make two inline-block span tags just to try it out but when the width of second span is below 50px or so the first span is placed lower. Everything works fine when width is bigger or if I delete word from the second span.

Html code:

    <!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Docume2nt</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <span id="span1">Hi</span>
    <span id="span2">Hi man</span>
</body>
</html>

Css code:

#span1{
        background: palevioletred;
}
#span2{
    background: lightskyblue;
    display: inline-block;
    height: 200px;
    width: 30px;
}

score 0 · Accepted Answer · answered Oct 24 '20 at 15:04

0

Check the vertical-align property for the first span. It's aligning it at the text's baseline by default I think. Change it like:

#span1 {
  background: palevioletred;
  vertical-align: top;
}

Working code: https://jsfiddle.net/vfk650o7/

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

answered Oct 24 '20 at 15:04

arieljuod

15,460
2
25
36

Thanks, do you have an idea why it changes depending on the width of second span? – DGX37 Oct 24 '20 at 16:04
It's using the inner text's baseline, when you don't have enough room it wraps into 2 lines and the baseline is the last line I guess. – arieljuod Oct 24 '20 at 19:39

Why is there an indent in span tag

1 Answers1