Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
vy le oai
4,697 Pointsneed help with line-height and vertical-align!
I have studied all resources I can but until now I can't get exactly what line-height and vertical-align does? Maybe with block level elements including text inside, line-height is the space between baselines of text.
But what about inline-block elements? I saw some sites setting line-height for inline-blocks elements like http://livedemo00.template-help.com/wt_55953/ ( class .icon-lg). Inside of those elements are images elements set vertical-align-middle, which would make images sit at the center of parents. I couldn't understand why vertical-align could do this.
Could you please help me know what exactly line-height is (not just the space above and bottom the text line in general) ? Thank you very much
2 Answers
Jeremy Franklin
8,512 PointsLine height affects the size of line boxes for the element. In the Box-Model what happens is that there's an "invisible-box"
around all text and line-height controls the height of that box. Check out the Mozilla Developers Network (mdn) under
line-height and box-model for more information on these.
I hope this helps! Jeremy Franklin
Dan Henning
8,691 PointsImages are inline elements, by default, so vertical-align will position them in line with other inline elements (e.g., an image contained within a paragraph). However, images do behave like inline-block elements in some circumstances.
The best description I've found for inline-block is from W3Schools: http://www.w3schools.com/cssref/pr_class_display.asp
"Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box."
Assuming that the vertically aligned images have, at some point in the hierarchy, taken on font-size (e.g., defaults on the <body> or perhaps a more specific <h1> element). Then line-height should be relative to some adjacent CSS setting.
When you apply line-height to an image, you are telling it to take up more-or-less vertical height. And vertical-align aligns the total "height" within the container.
(Note: There are numerous sources on the Web that recommend using unit-less measurements for line-height. For example, line-height: 1.15; rather than 1.15em.)
Best regards, Dan