W CSS odległość między wierszami jest bardzo łatwa do ustawienia. Istnieje specjalna właściwość do tego. Ale oczywiście istnieje wiele innych parametrów, które są uniwersalne i można je zastosować do tekstu.

Jeśli nie zostaną wprowadzone żadne ustawienia, ustawione zostaną wartości domyślne. Jeśli chcesz, możesz zmienić tę odległość. Wartość może być wyrażona w procentach lub w pikselach.

Wysokość wiersza

W CSS odległość między liniami można wykazać na poniższym rysunku.

odstępy między wierszami css

Powyższe zdjęcie pokazuje parametry za pomocąodpowiednie odległości. Tekst znajduje się w obszarze rozmiaru czcionki. Zwróć uwagę, że linia tekstu nie zaczyna się na ziemi, ale nieco wyżej. Poniższe spacje podano dla liter zawierających elementy od dołu (g, y itd.).

Zauważ, że przestrzeń między blokamirozmiar czcionki nazywa się wiodącym. W HTML i CSS ta właściwość nie pojawia się w żaden sposób, ale jest w innych edytorach graficznych i tekstowych. Na przykład w Adobe Photoshop.

prowadzenie w Photoshopie

Powyższy rysunek pokazuje, gdzie w Photoshopie możesz określić wiodący. Liczba wskazuje parametr wielkości czcionki.

rozmiar czcionki w Photoshopie

Przykłady użycia wysokości linii

W CSS odległość między wierszami może być ustawiona procentowo. Ilustracyjny przykład podano poniżej.

odległość między wierszami html

W przypadku małej wartości użytkownik Twojej strony będzie niewygodny w czytaniu.

Odległość można zmienić, a rozmiar czcionki. Jeśli różnica między głównymi parametrami jest bardzo różna na rysunkach, różnica ta jest kompensowana przez wzrost wyprzedzenia.

Subtelność projektu

W CSS odległość między liniami można dodatkowo regulować za pomocą różnych wcięć. Rozważ przykład na rysunku.

Zwiększ odległość między liniami css

W polu "Element" w naszym przypadku pojawi się tekst. Wypełnienie jest wcięciem wewnątrz obiektu, a margines jest wcięciem obiektu. Obramowanie to ramka. Może wynosić 0 pikseli, a może 100.

Poniższy obraz pokazuje jednocześnie wszystkie wcięcia, ramkę i wysokość linii tekstu.

Stylizowanie odległości między liniami w CSS

Jeśli masz mały tekst, wszystko w jednym wierszu,lub każdą linię w osobnym akapicie, wówczas odległość można regulować wcinając między tymi akapitami. Oznacza to, że maring i dopełnienie między wierszami w jednym elemencie nie ma żadnego efektu. Oni tylko wcinają krawędzie obiektu. Obiekt to cały akapit, a nie linia. Ważne jest, aby się tu nie mylić.

W przypadku, gdy istnieje wiele linii, a wszystko to znajduje się w jednym obiekcie, zaleca się zmianę czcionki za pomocą głównych parametrów.

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

Odległość między wierszami HTML można ustawićdo dowolnej klasy lub do wszystkich akapitów w tekście. Jeśli to określisz: p {line-height: 20px; }, wtedy absolutnie wszystkie akapity na stronie będą z liniami 20 pikseli. Jeśli potrzebujesz różnych rozmiarów w różnych miejscach, zalecamy wykonanie poniższych czynności.

Przepisuj style.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Dla jasności dodaj ramkę, aby zobaczyć, że działa. W przyszłości należy go usunąć.

Następnie zastosuj te klasy. Wynik jest następujący.

przykłady zmiany odległości między liniami

Zauważ, że w trzecim przypadku zespółprzebiegła nad tekstem. Wszystko dlatego, że rozmiar czcionki jest większy niż wysokość linii. Dlatego ważne jest, aby upewnić się, że nie ma takich sprzeczności. W przypadku małej wysokości linii należy odpowiednio zmniejszyć czcionkę.

Nie zaleca się robić zbyt mało tekstu iniewielka odległość między liniami. Ponieważ żaden użytkownik nie może przeczytać tego wszystkiego spokojnie. Jego oczy szybko stają się zmęczone. Wyszukiwarki również twierdzą, że tekst jest przyjazny dla użytkownika.

Ponadto ostatnio istnieje duży naciskna wygodę dla użytkowników mobilnych. Tam zalecenia zawsze mówią, że rozmiar czcionki powinien być normalny, a nie mały. Wpływa to szczególnie mocno na linki. Przy niewielkich rozmiarach użytkownik będzie miał trudności z korzystaniem z nawigacji w witrynie.

Wyszukiwarka Google ma specjalne narzędzie, które pomaga w tej analizie. Jest to bardzo wygodne dla webmasterów.

Oto przykład wyników, które mogą być.

Sprawdzanie użyteczności css dla użytkowników

Zaleca się stosowanie ich wskazówek, ponieważ te kryteria mają wpływ na wynik wyszukiwania.

</ p>