CSS Height vs Line-Height

Подписаться 101 тыс.

Просмотров 28 тыс.

50% 1

There are two different height properties in CSS that sometimes get confused - height and line-height. While both of them have to do with vertical space in your CSS, the line-height deals with the amount of space provided to write each line of text. By changing this value you can have lines of text that are very spaced our or lines of text that are overlapping.
Code GIST: gist.github.com/prof3ssorSt3v...

Опубликовано:

8 июн 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 22

@prasadmadushan 2 дня назад

That is perfect explanation, I love when you say "r" root element and 1 em ..... that is my level of expectation, and rarely someone go that level.

@somtovitus 4 года назад

This was entirely helpful. I got to understand line height when you highlighted it.

@markdacre6498 4 года назад

Thanks for clearing up my confusion about this! Especially appreciated that you used different units (rem AND also without specifying a unit) with the line-height property.

@lanamayberry2639 4 года назад

This was so helpful. Thank you so much. You have a really clear, kind way of explaining things - you're a great teacher. Thank you!

@ryanleenstra2265 4 года назад

Great video, very straightforward.

@spagetti2514 3 года назад

thank you for doing all these videos , im currently learning from scratch htmls and css .. subscribed!! i will be back

@paulbampoe8697 4 года назад

Thanks, very easy for anyone to understand!!

@ajithmoni1712 Год назад

Great way of explaining the details again. My take aways. REM - Root EMs - Line height with just a number is a multiple of Font-Size. New take away ascender and descenders. Last but not the least. Min-height. Thank u ... :-) u really are a professor.

@abdulwehabmohammed5580 2 года назад

Very impressive explanation thank you very much.

@enfieldli9296 2 года назад

Wow, so helpful!

@khushantwankhede8311 5 месяцев назад

nice work dear !!

@AbdulRafay-sv7ug 5 лет назад

Thanks Pal helps alot a especially a backend dev like me

@mathswithmanujsir6686 3 года назад

good explanation keep it up lover from india

@vedinak7360 Год назад

Thank you!

@gammex7441 Год назад

Great video! I do have one question though: Why when you highlight the h1, the text looks centered on the line-height while on the p it looks on the bottom? Thanks

@SteveGriffith-Prof3ssorSt3v3 Год назад

as long as the line-height is bigger than the font-size then by default they should be vertically centered.

@yash078 5 лет назад

Combining height and line-height in one video is a little confusing. I think height should be in a video with box sizing (margin, padding, width) and line-height in a separate one (with word-spacing and other typography topics).

@SteveGriffith-Prof3ssorSt3v3 5 лет назад

Height is part of the box-model. However, this video is about illustrating the difference between the two.

@alva909 Год назад

Great Videos. Can you do a video on max-height vs min-height? Thx!

@SteveGriffith-Prof3ssorSt3v3 Год назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YjtunZW7jxw.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6QwMvf1Jq0M.html These might help you.