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!
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.
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ą.
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.
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.
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
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