Вопросы Теги

Проблема с выравниванием HTML / CSS из-за пустого . Что сдвигает мой контент вниз?

У меня проблема с выравниванием в 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>

Вывод в браузере такой, как ожидалось:

enter image description here

Однако span.left и span.right не должны содержать никакого содержимого. Они здесь только для макета. Но когда я удаляю содержимое («x») обоих диапазонов следующим образом: 

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

Результат меняется на:

enter image description here

Почему он это делает? Что я могу сделать, чтобы решить эту проблему?

5
задан Dan Blows 3 February 2012 в 10:45
поделиться