1

comprendiendo la logica de line-height como funciona esta propiedad de css

header .logo a {
    color:white;
    text-decoration:none;
    line-height: 100px; 

}

header .logo img {
    width:100px;
    vertical-align: top;
}
1

1 respuesta 1

1

El line-height se usa para indicar el interlineado que permite controlar la altura ocupada por cada línea de texto. En tu caso estas diciendo que header .logo a tendra un interlineado de 100px y que la imagen se mostrará posicionado en base a ese interlineado, el efecto que veras es que si colocas un interlineado de mayor valor veras como baja el texto o la imagen y si colocas uno de menor valor subira, cuando digo que sube es como si le aplicases un margin-top con valores negativos, ese es el efecto que lograrias.

Si colocas un interlineado con el mismo valor a la altura, el efecto que veras es que tratará de centrarse con respecto a su contenedor, es decir si el line-height es igual al height

#test1{
  border:1px solid red;
  height:100px;
  line-height:100px;
}

#test2{
  border:1px solid blue;
  height:100px;
  line-height:10px;
}
<div id="test1">line-height 100px</div>
<div id="test2">line-height 10px</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.