Ustawienia w CSS: interlinia

W CSS, odległość między liniami jest bardzo łatwy do skonfigurowania. W tym celu istnieje specjalna właściwość. Ale, oczywiście, istnieje wiele innych parametrów, które są uniwersalne i mogą być stosowane do tekstu.

Jeżeli korekta nie jest wykonywana, to są ustawione na wartości domyślne. można zmienić odległość w razie potrzeby. Wartość ta może być procentową lub pikseli.

Wysokość wiersza

Odstęp między wierszami CSS można wykazać na poniższym rysunku.

W powyższym obraz przedstawia parametry z odpowiednich odległościach. Tekst jest w przestrzeni font-size. Należy zauważyć, że linia tekstu nie rozpocznie się u podstawy i nieco wyższy. Przestrzeń przedstawiono poniżej na listy, które mają elementy dolny (G, Y i tak dalej).

Należy zauważyć, że przestrzeń między blokami font-size nazywany jest interlinią. Z HTML i CSS ta właściwość nie pojawia, ale jest w innych edytorach graficznych i tekstowych. Na przykład w programie Adobe Photoshop.

Powyższy rysunek pokazuje, gdzie w „Photoshop”, można określić prowadzący. A następnie określić ustawienia font-size.

Przykłady zastosowania skład wysokość

W CSS, odległość między wierszami można ustawić procent. Dobrym przykładem jest podany poniżej.

W przypadku małych wartości użytkownik witryny będą niewygodne do czytania.

Odległość może być różny, a rozmiar czcionki. Jeżeli różnica pomiędzy podstawowymi parametrami znacznie różnią się w liczbach, różnica jest kompensowana przez wzrost wiodących.

subtelności konstrukcji

Odstęp między wierszami CSS można dodatkowo dostosować różne wcięcia. Rozważmy przykład na rysunku.

W „element” w tym przypadku będzie tekst. Wyściółka – wyściółka jest wewnątrz obiektu, a marża – wcięcie obiektu. Granicy – Ramka. To może być 0 pikseli i może być 100.

Poniższy rysunek przedstawia natychmiast wszystkie marginesy, ramkę i wysokością linii tekstu.

Jeśli masz mały tekst, wszystko w jednej linii, lub każdy wiersz w osobnym ustępie, można regulować odległość pomiędzy wcięciami akapitów. To jest Maring i wyściółka między wierszami w jednej komórce nie będzie miało wpływu. Tworzą wcięcie tylko na krawędziach obiektu. Object – cały ten akapit, zamiast linii w nim. Ważne jest, aby nie pomylić.

W przypadku gdy duża liczba wierszy, z których wszystkie znajdują się w tym samym obiekcie, czcionka jest zalecane, aby zmienić podstawowe parametry.

Jak zwiększyć odległość między liniami CSS

Odstęp między wierszami HTML, możesz zarejestrować się do jakiejkolwiek klasy lub dla wszystkich akapitów w tekście. Jeśli podasz tak: p {line-height: 20px; } – to absolutnie wszystkie akapity na stronie będą ciągi 20 pikseli. Jeśli chcesz w różnych miejscach, w różnych rozmiarach, zaleca się zrobić w następujący sposób.

Mamy przepisać style.

.class1 {linia wysokość: 20 pikseli; }

.class2 {linia wysokość: 16px; }

.class3 {linia wysokość: 12 pikseli; }

Dla jasności, możemy dodać ramkę, dzięki czemu można zobaczyć, że to działa. W przyszłości, należy go usunąć.

Następnie używamy tych klas. Wynik jest następujący.

Zauważ, że w trzecim przypadku, zespół pojechał do tekstu. Wszystko ze względu na fakt, że rozmiar czcionki jest większa niż wysokość linii. Dlatego ważne jest, aby upewnić się, że takie konflikty nie były. Jeśli robisz małą wysokość linii odpowiednio zmniejszyć czcionkę.

Nie zaleca się zrobić zbyt mało tekstu i niewielką odległość między liniami. Ponieważ żaden z użytkowników nie będzie w stanie to wszystko czytać spokojnie. Szybko zmęczone oczy. Wyszukiwarki również powiedzieć, że tekst jest łatwy w obsłudze.

Co więcej, w ostatnich latach istnieje silny nacisk na użyteczność dla użytkowników mobilnych. Tam zalecenia zawsze powtarzał, że rozmiar czcionki powinien być normalny, nie małe. Szczególnie silnie wpływa na odniesienie. Dzięki ich niewielkim rozmiarom użytkownik będzie trudne w użyciu nawigacji strony.

W wyszukiwarce „Google” jest specjalnym narzędziem, które pomaga w analizie. Jest to bardzo wygodne dla webmasterów.

Oto przykład z wynikami, które mogą być.

Zaleca się, aby korzystać z tych wskazówek, ponieważ kryteria te wpływają na wyniki wyszukiwania.