我想做两个内联块跨度标签只是为了尝试它，但是当第二个跨度的宽度低于50px左右时，第一个跨度被放置得更低。当宽度较大时，或者如果我从第二个跨度中删除单词，所有的工作都很好。
Html代码:
<!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代码:
#span1{
background: palevioletred;
}
#span2{
background: lightskyblue;
display: inline-block;
height: 200px;
width: 30px;
}
检查第一个跨度的垂直对齐属性。默认情况下，我认为它是在文本的基线上对齐的。更改如下:
#span1 {
background: palevioletred;
vertical-align: top;
}
工作代码:https://jsfiddle.net/vfk650o7/
文档:https://developer.mozilla.org/en-us/docs/web/css/vertical-align
