Eliminar espacios en blanco encima y debajo del texto grande en un elemento de bloque en línea
Digamos que tengo un único spanelemento definido como un bloque en línea. Su único contenido es texto sin formato. Cuando el tamaño de fuente es muy grande, se puede ver claramente cómo el navegador añade un poco de relleno encima y debajo del texto.
HTML:
CSS:
span {
display: inline-block;
font-size: 50px;
background-color: green;
}
<span>BIG TEXT</span>Al observar el modelo de caja, está claro que el navegador está agregando relleno dentro del borde del contenido . Necesito eliminar este "relleno", una forma es simplemente alterar la altura de la línea, como con:
http://jsfiddle.net/7vNpJ/1/
Esto funciona muy bien en Chrome, pero en Firefox el texto se desplaza hacia la parte superior (FF17, Chrome 23, Mac OSX).
¿Alguna idea de una solución para varios navegadores? ¡Gracias!
Parece que necesita establecer explícitamente una fuente y cambiarla line-heightsegún heightsea necesario. Suponiendo que 'Times New Roman' es la fuente predeterminada de su navegador:
span {
display: inline-block;
font-size: 50px;
background-color: green;
/*new:*/
font-family: 'Times New Roman';
line-height: 34px;
height: 35px;
}<span>
BIG TEXT
</span>
El navegador no agrega ningún relleno. En cambio, las letras (incluso las mayúsculas) son generalmente considerablemente más pequeñas en la dirección vertical que la altura de la fuente, sin mencionar la altura de la línea, que normalmente es de forma predeterminada aproximadamente 1,2 veces la altura de la fuente (tamaño de fuente).
No existe una solución general para esto porque las fuentes son diferentes. Incluso para tamaños de fuente fijos, la altura de una letra varía según la fuente. Y las letras mayúsculas no necesitan tener la misma altura en una fuente.
Se pueden encontrar soluciones prácticas mediante la experimentación, pero inevitablemente dependen de la fuente. Deberá establecer la altura de la línea esencialmente más pequeña que el tamaño de fuente. Lo siguiente parece producir el resultado deseado en diferentes navegadores de Windows, para la fuente Arial:
span.foo
{
display: inline-block;
font-size: 50px;
background-color: green;
line-height: 0.75em;
font-family: Arial;
}
span.bar
{
position: relative;
bottom: -0.02em;
}<span class=foo><span class=bar>BIG TEXT</span></span>Los elementos anidados spanse utilizan para desplazar el texto verticalmente. De lo contrario, el texto se ubica en la línea base y debajo de la línea base hay espacio reservado para los descendentes (como en las letras j e y).
Si miras de cerca (con zoom), notarás que aquí hay un espacio muy pequeño arriba y debajo de la mayoría de las letras. He configurado las cosas para que la letra “G” encaje. Se extiende verticalmente un poco más que otras letras mayúsculas porque de esa manera las letras se ven similares en altura. Hay problemas similares con otras letras, como la “O”. Y necesita ajustar la configuración si necesita la letra "Q", ya que tiene un descendente que se extiende un poco por debajo de la línea de base (en Arial). Y, por supuesto, si alguna vez necesita "É", o casi cualquier signo diacrítico, está en problemas.
Soy diseñador y nuestros desarrolladores tuvieron este problema al tratar con Android inicialmente, y nuestros desarrolladores web tienen el mismo problema. Descubrimos que el espacio entre una línea de texto y otro objeto (ya sea un componente como un botón o una línea de texto separada) que genera un programa de diseño es incorrecto. Esto se debe a que el programa de diseño no tiene en cuenta los signos diacríticos cuando define el "tamaño" de una sola línea de texto.
Terminamos agregando Êga cada línea de texto y creando manualmente espaciadores (pequeños rectángulos azules) que actúan como la "medida" desde la parte superior real del texto (es decir, la parte superior del acento en la E) o desde el descendente ( la parte inferior de una "g"). Por ejemplo, supongamos que tiene una navegación superior realmente aburrida que es solo un rectángulo y un título debajo. El programa de diseño dirá que el espacio entre la parte inferior del navegador superior y la parte superior del cuadro de texto del título es de 24 píxeles. Sin embargo, cuando se mide desde la parte inferior de la navegación hasta la parte superior de una marca de acento Ê, el espacio es en realidad de 20 píxeles.
Si bien me doy cuenta de que esta no es una solución de código, debería ayudar a explicar las discrepancias entre las especificaciones de diseño y el aspecto de la construcción.
