Understanding the line-height logic in css

Question

Understanding the line-height logic in css

Navigation

#1 by (1 votes)

1

understanding the line-height logic how this css property works

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

}

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

css

asked by Rangel 06.09.2018 в 22:08

source

1 answer

Error traversing a multidimensional array within a php session Limit content according to user

score 1 · Accepted Answer

The line-height is used to indicate the line spacing that allows controlling the height occupied by each line of text. In your case you are saying that header .logo a will have a line spacing of 100px and that the image will be positioned based on that line spacing, the effect you will see is that if you place a line spacing of higher value you will see lower the text or the image and if you put one of lower value will go up, when I say that goes up is as if you apply a margin-top with negative values, that is the effect you would achieve.

If you place a line spacing with the same height value, the effect you will see is that it will try to focus on its container, that is, if the line-height is equal to the 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>