У меня проблема с выравниванием в 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.left и span.right не должны содержать никакого содержимого. Они там только для целей макета. Но когда я удаляю содержимое ("x") обоих диапазонов, вот так:
<span class="left"></span>
<span class="text">Text comes here</span>
<span class="right"></span>
Выходные данные изменяются на это:
Почему он это делает? Что я могу сделать, чтобы решить эту проблему?