Odstępy między wierszami CSS: rozwiązania
Dosyć często początkujący projektanci mają problemy z opanowaniem kaskadowego arkusza stylów (CSS). Nie ma wyjątków odstępy między wierszami w CSS. Odstępy między wierszami to odległość między wierszami w pionie. Podobnie jak w zwykłym dokumencie Microsoft Word, ten parametr można również zmienić w tekście pliku html.
Podczas zmiany odstępu użyj wysokości linii
Pierwszym i najbardziej poprawnym rozwiązaniem problemu w odstępach czasu byłoby ustawienie wartości dla właściwości wysokości linii. Domyślnie wartość tej właściwości jest normalna (linia-wysokość: normalna;). Odstępy między wierszami są obliczane automatycznie przez samą przeglądarkę internetową i zależą w szczególności od rodzaju czcionki oraz jej wielkości. Każda dodatnia wartość liczbowa, która zostanie ustawiona we właściwości stylu wysokości linii, będzie postrzegana przez przeglądarkę jako liczba, o którą należy pomnożyć rozmiar bieżącej czcionki.
W CSS odstępy między wierszami można określać w jednostkach o różnej długości: punkty (pt), cale (cale), piksele (px) i procenty (%). Procent jest obliczany w odniesieniu do bieżącej czcionki, a domyślnie jego wartość wynosi 100%. Nie zapominaj, że właściwość height-line zapożycza wartość właściwości dziedziczącej z jej elementu nadrzędnego.
Oto kilka przykładów zwiększania odstępów między wierszami w CSS:
.
Proces pracy z odstępami między wierszami jest dość prosty. Powinieneś mieć podstawową znajomość CSS i możliwość podłączenia pliku do głównej strony html. Style można również ustawić bezpośrednio na stronie HTML:
Aby zrobić pół przerwę w tym zdaniu, musisz dodać następujący kod do pliku CSS:
p.stroka {
wysokość linii: 1,5;
}
Aby wykonać podwójny interwał, możesz napisać następujący kod:
p.stroka {
wysokość linii: 2;
}
lub
p.stroka {
wysokość linii: 200%;
}
W obu przypadkach przeglądarka zrozumie, że musisz pomnożyć aktualną czcionkę przez 2. Ta wartość będzie odstępem między wierszami.
Teraz podajemy przykład zmniejszania odstępów między wierszami (CSS):
Ważne jest, aby pamiętać, że ujemna wartość wysokości linii jest po prostu nieodczuwana, więc jej minimalna wartość może wynosić 0. Aby uzyskać półokres interwału, należy napisać następujący kod:
p.line {
wysokość linii: 0,5;
}
lub
p.line {
wysokość linii: 50%;
}
lub
p.line {
wysokość linii: 2;
}
lub
p.line {
wysokość linii: 0,5pt;
}
Wszystkie 3 opcje są poprawne i zgodne ze wszystkimi standardami W3C, będą działać w dowolnej wersji przeglądarki.
Podczas zmiany odstępów użyj dopełnienia
Jednak poza zmianą właściwości linia-wysokość istnieje inny sposób zmiany odstępów między wierszami w CSS, będzie to "gra" z wartościami właściwości wypełnienia. Właściwość stylu wypełnienia jest odpowiedzialna za wcięcie dowolnego obiektu html. Domyślnie ta właściwość wynosi 0. Wybierając różne wartości, można zmienić odstępy między wierszami, na przykład:
.
Praca z odstępami między wierszami jest łatwa. Wystarczy znać podstawy CSS i móc połączyć plik z główną stroną html. Możesz także ustawić go bezpośrednio na stronie z rozszerzeniem html.
Aby zwiększyć odstępy między wierszami, zwiększ wartość właściwości:
p.second {
dopełnienie: 10 pikseli;
}
W ten sposób odległość między liniami w naszym akapicie zostanie zwiększona o 10 pikseli w stosunku do wartości początkowej. Przy takim samym sukcesie można zmniejszyć odstępy między wierszami, np. Przepisując:
p.second {
dopełnienie: 0px;
}
Ujemne odstępy między wierszami
Jeśli zauważysz, nie wolno również wprowadzać wartości ujemnych, aby ciągi nie zachodziły na siebie nawzajem. W CSS odstępy między wierszami nie mogą być ujemne. Jeśli chodzi o przestrzeganie zasad pisania kodu i standardów W3C, nigdy nie można zapisać ujemnych wartości w odstępach między wierszami.
Zmiana odstępów między wierszami na listach
Czasami istnieje zadanie zmiany odstępów między wierszami na listach.
- i
- . Poprzednie metody nie doprowadzą do pożądanego wyniku, ale istnieje jedna właściwość, która może zmienić przedział na liście - ta właściwość jest marginesem. Ta właściwość stylu może być dodatnia lub ujemna. Pokażmy zmianę odstępów między wierszami na liście, na przykład:
Aby zwiększyć wcięcie, musisz zapisać następujące wiersze w pliku CSS:
ul li {
margin-top: 10px;
}
W związku z tym wskazaliśmy, że odległość od każdego elementu listy jest zwiększona o 10 pikseli. W tym przypadku jest to możliwe i ma wartość ujemną. W ten sposób możemy ustawić: - margin-top: -15px.