wysokość vs linia-stylizacja wysokości

Jaka jest różnica między używaniem tych dwóch, gdy mamy do czynienia z tekstem, który nigdy nie będzie więcej niż jednym wierszem? Oba mogą uzyskać podobne wyniki na ekranie z tego, co widzę w odniesieniu do elementów na górze lub na dole elementu. Po co w ogóle stosować wysokość linii, jeśli tak? Wzrost byłby bardziej sensowny w użyciu.

Edit: przykład tego stylizowanego przycisku utworzonego z div z tekstem w środku. To nigdy nie będzie Wielowierszowe. Tak więc wysokość linii będzie potrzebna do powody zgodności? albo coś, o czym Nie wiem?

Dzięki!

Author: EverTheLearner, 2011-10-01
Source

5 answers

height jest pionowym pomiarem pojemnika.

line-height Odległość od góry pierwszego wiersza tekstu do góry drugiego.

Jeśli używane są tylko z jedną linijką tekstu, spodziewam się, że w większości przypadków przyniosą podobne wyniki.

Używam height, gdy chcę jawnie ustawić rozmiar kontenera i line-height dla układu typograficznego, gdzie może to być istotne, jeśli użytkownik zmieni rozmiar tekstu.

 23
Author: Dennis Traub,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-30 22:23:14

Jeśli zawijasz tekst w div, nadasz div wysokość, a tekst rośnie do 2 linii (być może dlatego, że jest oglądany na małym ekranie jak telefon), tekst będzie pokrywał się z elementami pod nim. Z drugiej strony, jeśli podasz div wysokość linii, a tekst wzrośnie do 2 linii, div rozszerzy się (zakładając, że nie podasz również wysokości div).

Oto skrzypce które to demonstrują.

 19
Author: DwB,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-30 22:33:24

Dla celów praktycznych w przypadku cytowania (nigdy nie zawijania do więcej niż jednego wiersza) linia-height wyśrodkuje tekst w pionie. Należy jednak uważać na to założenie, ponieważ użytkownik ostatecznie kontroluje rozmiar czcionki.

 0
Author: steveax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-30 22:22:30

Zakładając, że tekst jest mniejszy od kontenera:

Ustawienie wysokości linii na kontenerze określa minimalną wysokość pól linii wewnątrz kontenera. W przypadku 1 wiersza tekstu tekst zostanie wyśrodkowany pionowo wewnątrz kontenera.

Jeśli ustawisz wysokość na kontenerze, kontener będzie rosnąć pionowo, ale tekst w nim zacznie się od pierwszej (górnej) linii wewnątrz niego.

 0
Author: Stephan van Hoof,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-03 12:40:16

Wysokość = line-height + padding-top + padding-bottom

 0
Author: Alexis Gamarra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-28 21:19:44