CSS Altura de Línea - inferior solamente

Ok, soy bastante nuevo en el desarrollo frontend así que por favor bueno si se trata de una pregunta tonta :)CSS Altura de Línea - inferior solamente

entiendo que esto no puede ser posible, pero cuando se aplica a un elemento line-height decir un h1, el line-height aplica espacio adicional tanto al top como al bottom de ese elemento.

Este tipo de sentido, pero solo quiero que line-height se aplique a la parte inferior del elemento para que las partes superiores de mi h1, h2 etc. puedan alinearse perfectamente con otros elementos.

Este jsFiddle muestra el problema: http://jsfiddle.net/zja4c/1/

Este jsFiddle muestra lo que quiero lograr, pero estoy obligado a utilizar los márgenes negativos: http://jsfiddle.net/25UTA/

El h1 con background colour del alinea rojo correctamente a la parte superior de la izquierda div, pero el texto no. Por lo tanto,

Mi pregunta es, ¿hay una manera de:

Aplicar line-height sólo a la parte inferior de un elemento o,
alinear un elemento a la parte superior del espacio creado por la aplicación de line-height alguna manera

Fuente

2012-07-28 Anonymous

¿Quiere que la 1ª línea esté alineada arriba? –

Sí, solo la primera línea –

El uso de line-height es su única opción si desea mantener un espaciado adecuado entre saltos de línea. El relleno se realizará en la parte inferior del elemento de nivel de bloque H1, como señaló. Creo que los márgenes negativos son la mejor opción, pero tendrá que poner a punto que se alinea perfectamente con una 50px line-height:

http://jsfiddle.net/25UTA/1/

Si los márgenes negativos no pueden ser utilizados por alguna razón, se puede utilice el posicionamiento relativo y un valor negativo de top para lograr un efecto similar.

http://jsfiddle.net/25UTA/2/

Usando em 's o porcentuales tamaños de fuente y line-alturas podría hacer de este eaiser.

Fuente

2012-07-28 16:51:16

Este es mi problema: quiero que ocurra el espaciado entre líneas, solo que no sobre el elemento. ¿No hay forma de alinear verticalmente el texto hacia arriba? –

Desafortunadamente, no hay forma de alinear verticalmente dentro de la altura de la línea. He actualizado mi respuesta con otro método, pero es más o menos el mismo efecto que los márgenes negativos. –

Se podía olvidar altura de la línea por completo y utilizar padding-bottom:

fiddle

Fuente

2012-07-28 16:29:56 Andy

Este tipo de trabajo funciona, pero no me permite obtener las propiedades del espaciado de línea, es decir, el espacio entre las líneas –

En mi conocimiento no es posible aplicar line-height sólo para bottom usando CSS.

Así que puedes probar con padding como dijo user1538100.

Fuente

2012-07-28 16:40:55 Prashobh

Ninguno de estos elementos de referencia de respuestas con su display establecido en inline.

Line-height es una configuración que hace referencia a elementos inline.Hasta ahora, cada respuesta se ha referido al uso de margen y margen, que no funcionan con el texto de estilo inline.

Puede modificar la posición del texto dentro de su línea con vertical-align. Aquí hay un enlace a un artículo que va en abundante detalle sobre la propiedad y cómo funciona:

http://christopheraue.net/2014/03/05/vertical-align/

Fuente

2017-01-05 16:41:46 Andrew

Una solución sencilla es hacer que el line-height 70% y añadir un poco de relleno de fondo.

p, h2 { 
line-height:70%; 
padding-bottom: 3px; 
}

Fuente

2017-05-05 16:21:27 Bob

CSS Altura de Línea - inferior solamente

Respuesta

Cuestiones relacionadas