5
Tengo un problema de alineación en html/css. He simplificado mi problema a esto:problema de alineación html/css debido a <span> vacío. ¿Qué está moviendo mi contenido?
<!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>
La salida en el navegador es como se esperaba:
Sin embargo, span.left y span.right no debe contener ningún contenido. Están ahí solo para propósitos de diseño. Pero cuando quito el contenido ("x") de los dos tramos de esta manera:
<span class="left"></span>
<span class="text">Text comes here</span>
<span class="right"></span>
la salida cambia a esto:
¿Por qué se hace esto? ¿Qué puedo hacer para resolver esto?
Sí, esto está funcionando, ¡gracias! Entonces, ¿la línea de base de un tramo vacío se considera el borde inferior del tramo mismo? Pero si contiene texto, ¿es la línea de base del texto en el lapso? Extraño... – NetWave