Menu
http://jsfiddle.net/xJmZt/
As you can see in the above example , there is extra height of about 6px on the div.
That extra height is gone if line-height is changed to ~1px (link).
So line-height affects images too ?
906
#Why line-height is important The purpose of the line-height is to define a readable line spacing for your text. Because readibility is dependent upon the size of the text, it is recommended to use a dynamic value that is relative to the size of the text.
line-height: 1.5 (without units) will mutiply the element's font size by 1.5 to compute the line height. line-height: 150% will take 150% of the element's computed font size to compute the line height, which is equivalent to multiply it by 1.5 .
Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next. Traditionally, in metal type, this was the combined measurement of the font size and the strips of lead that were inserted between each row (called “leading”) of type.
Height is the vertical measurement of the container, for example, height of a div. Line-height is a CSS property to specify the line height i.e. the distance from the top of the first line of text to the top of the second. It is the space between the lines of two paragraphs.
Images by default are defined as inline elements so they follow text rules, you can either set the container height to match the images', or give the image display: block or vertical-align: bottom.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
