Eliminar el espacio en blanco por encima y por debajo del texto grande en un elemento de bloque en línea

El navegador no está añadiendo ningún relleno. En cambio, las letras (incluso las letras 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 por defecto aproximadamente 1.2 veces la altura de la fuente (tamaño de fuente).

No hay una solución general para esto, porque las fuentes son diferentes. Incluso para un tamaño de fuente fijo, la altura de una letra varía según la fuente. Y las letras mayúsculas no necesitan tener la misma altura en un letra.

Se pueden encontrar soluciones prácticas mediante la experimentación, pero inevitablemente dependen de la fuente. Necesitará establecer la altura de la línea esencialmente más pequeña que el tamaño de la fuente. Lo siguiente parece dar el resultado deseado en diferentes navegadores en Windows, para la fuente Arial:

<style>
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;
}
</style>
<span class=foo><span class=bar>BIG TEXT</span></span>

Los elementos anidados span se utilizan para desplazar el texto verticalmente. De lo contrario, el texto se encuentra en la línea de base, y debajo de la línea de base hay espacio reservado para los descendentes (como en las letras j y y).

Si miras de cerca (con zoom), notarás que hay un espacio muy pequeño por encima y por debajo de la mayoría de las letras aquí. He puesto las cosas para que la letra "G" encaje. Se extiende verticalmente un poco más lejos que otras letras mayúsculas, porque de esa manera las letras se ven similares en altura. Hay problemas similares con otras letras, como "O". Y necesitas afinar la configuración si necesitas la letra "Q", ya que tiene un descensor que se extiende un poco por debajo del basal (en Arial). Y por supuesto, si alguna vez necesitas "É", o casi cualquier marca diacrítica, estás en problemas.

Tuve un problema similar. A medida que aumenta la altura de la línea, el espacio por encima del texto aumenta. No es relleno, pero afectará el espacio vertical entre el contenido. Descubrí que agregar un margen superior a-ve parecía hacer el truco. Tenía que hacerse para todas las diferentes instancias de altura de línea y también varía con la familia de fuentes. Tal vez esto es algo que los diseñadores deben tener más en cuenta al pasar los requisitos de diseño (?) Así que para un caso particular de la familia de fuentes y altura de la línea:

h1 {
    font-family: 'Garamond Premier Pro Regular';
    font-size: 24px;
    color: #001230;
    line-height: 29px;
    margin-top: -5px;    /* CORRECTION FOR LINE-HEIGHT */
}

Soy diseñador y nuestros desarrolladores tuvieron este problema al tratar con Android inicialmente, y nuestros desarrolladores web están teniendo el mismo problema. Encontramos 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 escupe un programa de diseño es incorrecto. Esto se debe a que el programa de diseño no tiene en cuenta los diacríticos cuando define el "tamaño" de una sola línea de texto.

Terminamos agregando "Êg" a cada línea de texto y crear manualmente espaciadores (pequeños rectángulos azules) que actúan como la "medida" desde el actual parte superior del texto (es decir, la parte superior de la marca de acento en la E) o desde el descendiente (la parte inferior de una "g"). Por ejemplo, digamos que tienes una navegación superior realmente aburrida que es solo un rectángulo y un título debajo de él. El programa de diseño dirá que el espacio entre la parte inferior de la navegación superior y la parte superior del cuadro de texto del título 24px. Sin embargo, cuando se mide desde la parte inferior del nav a la parte superior de una marca de acento Ê, el espaciado es en realidad 20px.

Aunque me doy cuenta de que esto no es una solución de código, debería ayudar a explicar las discrepancias entre las especificaciones de diseño y cómo se ve la compilación.

Vea esta imagen para ver un ejemplo de lo que hace Sketch con type

He estado molesto por este problema a menudo. Vertical-align solo funcionaría en la parte inferior y el centro, pero nunca en la parte superior! :-(

Parece que he encontrado una solución que funciona tanto para elementos de tabla como para elementos de párrafo libre. Espero que al menos estemos hablando de un problema similar aquí.

CSS:

p {
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    background: #FFFFFF;
    margin: 0
    margin-top: 3px;
    margin-bottom: 10px;
}

Para mí, los ajustes de margen lo ordenaron sin importar dónde ponga mi "p>.../ p>" código.

Espero que esto ayude...