html/css对齐问题，因为存在空<；span>；。什么在向下移动我的内容？_Css_Web_Html

html/css对齐问题，因为存在空<；span>；。什么在向下移动我的内容？

css web html

html/css对齐问题，因为存在空<；span>；。什么在向下移动我的内容？,css,web,html,Css,Web,Html,我在html/css中有一个对齐问题。我将问题简化为： <!DOCTYPE html> <html> <head> <title>Test</title> <style> span { display: inline-block; height: 50px; } span.text { background-color: Yellow;} span.left,

我在html/css中有一个对齐问题。我将问题简化为：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        span { display: inline-block; height: 50px; }
        span.text { background-color: Yellow;}
        span.left, span.right { background-color: Red;  width: 20px;}
    </style>
</head>
<body>
    <span class="left">x</span>
    <span class="text">Text comes here</span>
    <span class="right">x</span>
</body>
</html>


试验
span{显示：内联块；高度：50px；}
span.text{背景色：黄色；}
span.left，span.right{背景色：红色；宽度：20px；}
x
这里有文字
x

浏览器中的输出符合预期：

但是，span.left和span.right不应包含任何内容。它们仅用于布局目的。但当我删除两个跨距的内容（“x”）时，如下所示：

<span class="left"></span>
<span class="text">Text comes here</span>
<span class="right"></span>


这里有文字

输出更改为：

为什么要这样做？如何解决此问题？

垂直对齐有问题，因为它设置为默认基线。只需将其更改为顶部：

span { display: inline-block; height: 50px;vertical-align:top; }

是的，这很有效，谢谢！那么，空跨度的基线被认为是跨度本身的底边？但是如果它包含文本，它是跨度中文本的基线？奇怪的