Hola todos :
Estaba siguiendo este tema mientras trataba de hacer memoria. Creo que lo de los
19px (que en realidad es
1em) es justamente por el salto de línea (o al menos un espacio para texto) que se incluye dentro del
div.
Pero me parece recordar que en
Firefox y
Opera también estaban, y no los pude sacar junto con el tamaño de la fuente. Claro que no probé con
overflow:hidden; allí sí debía andar. El problema es qué pasa con los bordes.
Hice este ejemplo en una versión vieja de
IE. Si alguien quiere experimentar, me gustaría saber cómo se comporta en otras versiones y navegadores.
Código:
<html>
<head>
<style>
body{font-size:100%; font-family:'times new roman'; }
.alfa{background:navy; height:1em; width:10px; display:inline; font-size:inherit; line-height:0px; font-family:'ti¬mes new roman' 'arial' 'courier new'; }
.bravo{background:black; height:1em; width:10px; display:inline; font-size:inherit; line-height:0px; font-family:'times new roman' 'arial' 'courier new'; }
.charly{background:yellow ; border-width:9px; border-style:solid; border-color:red blue green silver; height:0px; width:0px; display:inline; font-size:0em; line-height:0px; font-family:'times new roman' 'arial' 'courier new'; }
.delta{background:yellow ; border-width:9px; border-style:solid; border-color:red blue green silver; height:9px; width:9px; display:inline; font-size:0em; line-height:0px; font-family:'times new roman' 'arial' 'courier new'; overflow:hidden; }
</style>
</head>
<body>
<div class="alfa" title="alfa"></div>
<div class="bravo" title="bravo"></div>
<div class="charly" title="charly"></div>
<div class="delta" title="delta"></div>
<br /><br />
<b>notas</b>
<ol type="A">
<li>El tamaño de fuente en <t>body</t> es de <tt>100%</tt> y familia <tt>Times New Roman</tt>.</li>
<li><tt>alfa</tt> tiene tamaño fuente por omisión y familia <tt>Arial</tt>.</li>
<li><tt>bravo</tt> tiene tamaño fuente por omisión y familia <tt>Times New Roman</tt>.</li>
<li><tt>charly</tt> y <tt>delta</tt> son iguales, tienen borde <tt>9px</tt>, tamaño <tt>0</tt> y fuente <tt>0</tt>.</li>
<li><tt>delta</tt> tiene además <tt>overflow:hidden</tt>. (Aquí se nota que el <tt>overflow</tt> incluye a los bordes)</li>
<li>Comparando, se nota que <tt>alfa</tt> y <tt>bravo</tt>, teniendo asignada la misma altura se ven diferente por el cambio de fuente. Que en <tt>charly</tt> sólo se ven los bordes (que son aproximadamente la mitad de la fuente de <tt>bravo</tt>) y que el espacio del contenido es "0".</li>
</ol>
</body>
</html>
No le puse DTD, justamente para que se pueda probar con cada uno.