html / css对齐问题，因为< span>。什么是移动我的内容？ [英] html/css alignment issue because of an empty <span>. What is moving my content down?
本文介绍了html / css对齐问题，因为< span>。什么是移动我的内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在html / css中有一个对齐问题。我将我的问题简化为：
I have an alignment problem in html/css. I simplified my problem to this:
<!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>
浏览器中的输出是预期的：
The output in the browser is as expected:
span.left和span.right不应包含任何内容。它们仅用于布局目的。但是，当我删除两个跨度的内容（x），如下：
However, span.left and span.right should not contain any content. They are there for layout purposes only. But when I remove the content ("x") of both spans like this:
<span class="left"></span>
<span class="text">Text comes here</span>
<span class="right"></span>
输出更改为：
为什么要这样做？我可以做什么来解决这个问题？
Why is it doing this? What can I do to solve this?
推荐答案
垂直对齐有问题，因为它设置为默认 baseline 。只需将其更改为顶部：
Vertical align is problematic, since it is set to the default baseline. Just change it to top:
span { display: inline-block; height: 50px;vertical-align:top; }
这篇关于html / css对齐问题，因为< span>。什么是移动我的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
