Samouczki HTML: odstępy między wierszami CSS

Odstępy między wierszami CSS jest bardzo potrzebny do projektowania tekstu. Każdy ekspert zawsze używa ich, jeśli tworzy piękną stronę internetową. Dzięki tym atrybutom możesz wykonywać dowolne operacje z tekstem.

Z reguły większość projektantów nie lubi domyślnego układu tekstu w html. Odstępy między wierszami CSS pozwala dostosować prawie wszystko, co możesz sobie wyobrazić. A jeśli sięgniesz głęboko, możesz zrobić to, o czym nigdy nie myślałeś.

Jak ustawić odstępy między wierszami tekstu w CSS

Ważne jest, aby zrozumieć, że możesz ustawić rozmiar linii, wcięć itp. Do wszystkich elementów, w których znajduje się tekst. Na przykład wszystkie te atrybuty są doskonałe do:

• akapit;
• listy;
• ;
• tabele;
• nagłówki;
• i wszystko inne, co publikujesz.

Biorąc pod uwagę odstępy między wierszami CSS, przede wszystkim zwróć uwagę na następujące atrybuty.

W "Photoshopie" znajduje się koncepcja "Prowadzenia". W CSS nie ma takiego atrybutu, ale dzięki temu można wytłumaczyć istotę. W rzeczywistości jest to odległość między liniami.

W CSS rozmiar linii jest ustalany za pomocą parametru wysokości linii i rozmiaru czcionki. Jak widać, obraz wyraźnie stwierdza, że ​​rozmiar czcionki jest wielkości czcionki. Żadna litera nie wykracza poza te ograniczenia.

Wysokość linii to odległość od środka górnej linii prowadzącej do środka niższej linii wiodącej. Strzałki to wszystko pokazano na rysunku.

Zwróć uwagę, że jeśli określisz wysokość linii mniejszą niż rozmiar czcionki, linie będą się nakładać na siebie. Pamiętaj, aby postępować zgodnie z tym, aby uniknąć takiej sytuacji.

Niektórzy ludzie zastanawiają się, dlaczego rozmiar czcionki jest rozciągnięty poniżej linii z literami. To proste. W końcu są litery, które są niższe niż główny poziom linii. Poniższy rysunek jest wyraźnym przykładem miejsca użycia symboli rozciągniętych w górę iw dół.

Jak widać, litery zajmują cały zakres rozmiaru czcionki. A wysokość linii jest większa, a równe miejsce jest dodawane po obu stronach.

Wartość atrybutu line-height może być dowolna:

• piksele;
• cale;
• przedmioty;
• zainteresowanie;
• i inne, które są używane w CSS.

Nie można podać wartości ujemnej. Na przykład, jeśli określisz współczynnik równy półtorej, otrzymasz standardowy półtorej przerwy w tekście.

Jeśli podajesz procent, pamiętaj, że 100% w linii wysokości odpowiada wartości rozmiaru czcionki.

Ponadto możesz określić wartość normalną lub dziedziczą. Jeśli określisz normalny, odległość między liniami zostanie automatycznie obliczona przez przeglądarkę według własnego uznania. Wartość może być inna, ponieważ zależy od przeglądarki. Zaleca się ustawienie określonego numeru, aby wszyscy użytkownicy mieli to samo.

Dziedzicz oznacza, że ​​wartość będzie dokładnie taka sama jak element nadrzędny.

Bardziej szczegółowy projekt

Odstępy między wierszami CSS nie są w rzeczywistości ograniczone do powyższych atrybutów. Odległość jest nadal korygowana przez atrybuty marginesu i wypełnienia. Jeśli podasz atrybut dokładnie jako margin = '5px', to ze wszystkich stron linii (akapitu) zostanie dodana odległość 5 pikseli.

Jeśli chcesz określić tylko powyżej akapitu, możesz określić margines górny. Tłumaczenie jest bardzo proste. Dzięki temu możliwe będzie ustawienie wcięć z każdej strony.

Zauważ, że istnieje również atrybut dopełnienia. Działa dokładnie tak samo jak margines. Można ustawić zarówno wcięcie ogólne, jak i określony kierunek (w lewo, w prawo, w górę, w dół).

Przyjrzyj się dokładnie powyższemu rysunkowi. Margines - wcięcie na zewnątrz obiektu i wypełnienie - wewnątrz.

Te atrybuty są globalne. Można je zastosować do wszystkiego - zdjęcia, tabele, tekst, linki i tak dalej.

Zapamiętaj to raz na zawsze. To bardzo ważny punkt w projektowaniu obiektów. Na przykład dzięki marginesowi możesz określić wcięcia między tekstem a obrazami w środku. Jeśli te wcięcia nie są obecne, tekst zostanie umieszczony blisko obrazu.

Jeśli masz tekst w tabeli, użyj dopełnienia, aby zapobiec przyklejaniu się tekstu do krawędzi stołu, ponieważ wygląda to paskudnie. A jeśli ustawisz wcięcie co najmniej 5 pikseli, będzie to wyglądało znacznie lepiej. Oprócz wysokości linia ma szerokość atrybutu.

Czasami jest to bardzo potrzebna właściwość. Poniższy rysunek pokazuje przykład innej szerokości tekstu.

Przykład projektu

Tworząc projekt strony internetowej, należy zawsze uczynić tekst tak czytelnym, jak to tylko możliwe. Jeśli użytkownik ma trudności z odczytaniem tekstu (jest zbyt mały lub zbyt duży), po prostu zamknie twoją witrynę.

Spróbuj porównać dwa akapity pokazane na poniższym rysunku. Który tekst preferujesz przeczytać?

Odstępy między wierszami CSS są tak zaprojektowane, aby wygodnie postrzegać tekst. Nie zapominaj również, że różne czcionki mogą różnić się wysokością początkową.

Dla jasności możesz sprawdzić w dowolnym edytorze. Porównaj kilka czcionek.

Pamiętaj, że wszystkie czcionki są zapisane w 24 pikselach. Jak widać, wszystkie różnią się wysokością i szerokością liter. Jeśli porównasz wymiary więcej, różnica będzie bardziej oczywista.

CSS: odstępy między wierszami na liście

Korekta odstępów jest stosowana na listach. Ponadto w stylach list opisywany powyżej margines i dopełnienie są charakterystyczne. Dzięki temu listy stają się piękniejsze niż standard. Używając wszystkich tych atrybutów, możesz ustawić:

• Wysokość elementów listy.
• Wcięcie tekstu po lewej stronie.
• Wcięcia dla linii powyżej i poniżej.
• Maksymalna szerokość każdej pozycji.

Wniosek

Posiadając taki zestaw atrybutów, możesz grać z projektem nie tylko linii, ale i wszystkiego, co chcesz. Są to parametry globalne, na które absolutnie wszystkie elementy podlegają (wyjątek to rozmiar czcionki, ponieważ dotyczy tylko tekstu).