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;
}
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;
}
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>