Spis treści:
Szybkie linki
- Luka CSS to wszechstronna właściwość określająca odstępy między elementami.
- gap to właściwość skrótu, która może przyjmować dwie wartości w celu zdefiniowania odstępów między wierszami i kolumnami.
- luki można używać w układach Flexbox, Grid i Multi-column.
CSS oferuje wiele sposobów rozmieszczania elementów na stronach internetowych, od pozycjonowania bezwzględnego po projektowanie oparte na siatce. Odstępy wokół i pomiędzy elementami są równie ważne, a opcji jest wiele. Właściwość gap jest użytecznym i wszechstronnym sposobem wprowadzania białych znaków i działa z kilkoma różnymi schematami układu.
Co to jest luka?
Luka CSS to prosta, ale niezbędna właściwość stylu, która pomaga zdefiniować odstępy w układach projektu. Zapewnienie swoim elementom przestrzeni to jedna ze złotych zasad kompozycji, którą warto kierować się, aby projekt graficzny był przyjemny i efektowny.
Możesz użyć tej właściwości, aby określić rozmiar odstępów między elementami w trzech formatach układu:
Wszystkie nowoczesne przeglądarki obsługują właściwość gap, która uzupełnia właściwości modelu pudełkowego, takie jak margines i dopełnienie.
Jak napisać właściwość luki CSS
Podstawowa składnia właściwości gap jest następująca:
gap: <row-gap> <column-gap>;
Każda wartość może mieć długość lub wartość procentową, a odstępy między kolumnami są opcjonalne; bez niego pojedyncza wartość miałaby zastosowanie zarówno do wierszy, jak i kolumn. Więc:
gap: 10em;
…oznacza, że zarówno wiersze, jak i kolumny będą miały odstęp 10-krotność bieżącego rozmiaru czcionki, podczas gdy:
gap: 20px 10%;
… spowoduje utworzenie odstępu między wierszami o wielkości 20 pikseli i odstępu w kolumnie równego jednej dziesiątej szerokości elementu zawierającego.
Powinieneś używać gap z elementami kontenera, które definiują układ, a nie elementami wewnątrz kontenera. Właściwość ma na celu stworzenie jednolitej przestrzeni pomiędzy elementami, a nie bardziej złożonych, zmiennych odstępów.
Używanie przerwy w Flexboxie
Za pomocą odstępu można kontrolować odstępy między wierszami i kolumnami tworzone w układzie elastycznym. Kierunek elastyczności używany w układzie określi, czy ma zastosowanie odstęp między wierszami, czy odstępami w kolumnach.
Domyślnie w normalnym kierunku wierszy elementy w elastycznym kontenerze będą wyświetlane obok siebie. Zatem ten prosty CSS:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Tworzy ten układ:
Należy pamiętać, że każdy element w kontenerze korzysta z klasycznych właściwości modelu pudełkowego w zakresie odstępów: dopełnienie i margines. Dodanie pewnej luki:
.flex-layout { gap: 20px; }
Zwiększy przestrzeń pomiędzy elementami elastycznymi, ale nie wokół nich:
Jeśli Twój układ elastyczny wyświetla elementy zarówno w kolumnach, jak i w wierszach — poprzez zawijanie elementów, na przykład:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Zobaczysz efekt obu luk:
Zawsze pamiętaj, że inne właściwości, takie jak margines i justowanie zawartości, mogą wpływać na odstęp między elementami. Pomyśl o odstępie jako o wartości minimalnej, chyba że wyraźnie kontrolujesz wszystkie inne właściwości, które mogą wpływać na odstępy.
Używanie przerwy z siatką
Możesz także użyć odstępu w układzie siatki. Główna różnica polega na tym, że zwykle będziesz chciał określić odstępy między wierszami i kolumnami, ponieważ siatka jest bardziej dostosowana do układów dwuwymiarowych.
Podobnie jak w układzie Flex, Grid domyślnie wyświetla elementy obok siebie, chociaż możesz kontrolować odstępy wokół każdego elementu za pomocą dopełnienia i marginesu:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Rezultatem jest typowy układ siatki:
Dodanie luki:
.grid-layout {
gap: 80px 40px;
}
Wstawi spację pomiędzy każdym elementem:
Zwróć uwagę, jak mają tu zastosowanie poszczególne wartości odstępu między wierszami i kolumnami, tworząc odstęp między wierszami dwukrotnie większy (80 pikseli) od odstępu między kolumnami (40 pikseli). Pamiętaj, że jeśli użyjesz pojedynczej wartości, zdefiniujesz tę samą przerwę między wierszami i kolumnami.
Używanie odstępu w układach wielokolumnowych
Właściwości gap można również używać w układach kolumn, ale w tym przypadku istotna jest tylko jedna wartość; nie ma rzędów. Układy wielokolumnowe mają domyślną lukę:
.column-layout {
column-count: 3;
}
Ale jest bardzo mały, ma rozmiar 1:
Jest to szczególnie zauważalne podczas zmiany czcionki, a zwłaszcza podczas justowania tekstu:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
Powstałe wiersze tekstu nakładają się na siebie i czytanie staje się niewygodne:
Określając odstęp, możesz zwiększyć odstęp między kolumnami, dając im więcej miejsca na oddychanie.
.column-layout {
gap: 2em;
}
Może się okazać, że 2em lub nawet 3em daje bardziej czytelny wynik, w zależności od innych czynników, takich jak szerokość kolumn:
Pamiętaj, że możesz użyć narzędzia przeglądarki, takiego jak Narzędzia deweloperskie przeglądarki Google Chrome, aby sprawdzić układy i zobaczyć, jak właściwości takie jak odstęp i margines wpływają na układy.
Używając dwóch wartości odstępu, sprawdź, czy są one ustawione we właściwy sposób. Kolejność „wiersz, kolumna” może być nieintuicyjna, ale odpowiada kolejności innych właściwości skrótów, takich jak dopełnienie i margines.
Dokładny sposób użycia odstępu będzie się różnić w zależności od schematu układu, do którego go zastosujesz. Generalnie jednak po szczelinę warto sięgać wtedy, gdy potrzebna jest regularna przestrzeń pomiędzy przedmiotami, a nie wokół nich.