Podcast CSS – 013: Spacje .
Załóżmy, że masz kolekcję trzech pudełek. są nakładane na siebie i potrzebne odstępu między nimi. Na ile sposobów można to wyobrazić sobie w CSS?
Właściwość margin
może zapewnić Ci to, czego potrzebujesz,
ale mogą też dodać niepożądane odstępy.
Jak na przykład ustawić kierowanie tylko na odstęp pomiędzy każdym z tych elementów?
W tym przypadku bardziej odpowiednie może być hasło gap
.
Jest wiele sposobów dostosowywania odstępów w interfejsie,
a każdy z nich ma inne mocne strony i pewne zastrzeżenia.
Odstępy w kodzie HTML
Sam kod HTML udostępnia kilka metod stosowania elementów spacji.
Elementy <br>
i <hr>
pozwalają rozmieszczać elementy w kierunku bryły,
czyli w języku łacińskim,
w kolejności od góry do dołu.
Jeśli używasz elementu <br>
,
utworzy podział wiersza,
tak samo jak naciśnięcie klawisza Enter w edytorze tekstu.
Element <hr>
tworzy linię poziomą ze spacjami po obu stronach, nazywaną margin
.
Oprócz elementów HTML
Elementy HTML mogą tworzyć przestrzeń.
Encja HTML to zarezerwowany ciąg znaków, które przeglądarka zastępuje elementami znakowymi.
Przykład:
jeśli wpiszesz ©
w pliku HTML,
zostanie on przekształcony w znak ©.
Element
jest przekształcany w nierozdzielający znak spacji,
, który zawiera odstęp w tekście.
Zachowaj jednak ostrożność,
bo nierozpadający się aspekt tego znaku łączy te 2 elementy,
co może powodować dziwne działanie.
Marża
Jeśli chcesz dodać więcej miejsca na zewnątrz,
używasz właściwości margin
.
Margines jest jak osłona wokół elementu.
Właściwość margin
to skrót od margin-top
,
margin-right
, margin-bottom
i margin-left
.
Skrót margin
stosuje właściwości w określonej kolejności:
w górę, w prawo, na dole i w lewo.
Pamiętasz je z kłopotami: NIE ROZWIĄZYWAĆ PROBLEMÓW.
Skrótu margin
można też używać z 1, 2 lub 3 wartościami.
Dodanie czwartej wartości umożliwia określenie każdej strony.
Obowiązują następujące zasady:
- Jedna wartość zostanie zastosowana do wszystkich stron. (
margin: 20px
). - Dwie wartości: pierwsza wartość zostanie zastosowana na górze i na dole,
a druga wartość zostanie zastosowana po lewej i prawej stronie.
(
margin: 20px 40px
) - Trzy wartości: pierwsza to
top
, druga wartość toleft
iright
, a trzecia wartość tobottom
. (margin: 20px 40px 30px
).
Margines może być określony parametrem
wartość procentową lub wartość automatyczną, np. 1em
lub 20%
.
Jeśli używasz wartości procentowej,
wartość zostanie obliczona na podstawie szerokości kontenera zawierającego Twój element.
Oznacza to, że jeśli blok zawierający Twój element ma szerokość 250px
a element ma wartość margin
o wartości 20%
:
każdy bok elementu będzie miał obliczony margines wynoszący 50px
.
Jako marży możesz też użyć wartości auto
.
W przypadku elementów na poziomie bloku o ograniczonym rozmiarze,
margines auto
zajmie dostępne miejsce w kierunku, w którym został zastosowany.
Dobrym przykładem jest to,
od modułu Flexbox, w którym elementy odchodzą od siebie.
Innym dobrym przykładem marginesu auto
jest kod o maksymalnej szerokości wyśrodkowany w poziomie.
Tego rodzaju kod jest często używany do utworzenia spójnej środkowej kolumny w witrynie.
.wrapper {
max-width: 400px;
margin: 0 auto;
}
Tutaj wyjmujemy marginesy z górnej i dolnej strony (blokady).
i auto
dzielą przestrzeń między lewą i prawą stroną (w tekście).
Marża ujemna
Wartości ujemnych można też użyć do określenia marży. Zamiast dodawać odstęp między sąsiednimi elementami, zmniejszy to odstęp między nimi. W rezultacie elementy mogą się nakładać, jeśli zadeklarujesz ujemną wartość większą niż dostępne miejsce.
Zwinięcie marginesu
Zwijanie marginesów to skomplikowana koncepcja, ale jest to coś, co spotyka się bardzo często przy tworzeniu interfejsów. Załóżmy, że masz 2 elementy: nagłówek i akapit, z których obydwa mają pionowy margines:
<article>
<h1>My heading with teal margin</h1>
<p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
margin-bottom: 2rem;
}
p {
margin-top: 3rem;
}
Na pierwszy rzut oka
moglibyście sądzić, że akapit będzie oddalony od nagłówka o 5em
,
ponieważ 2rem
i 3rem
łącznie obliczają 5rem
.
Jednak margines pionowy zwija się, dlatego pokój ma w rzeczywistości 3rem
.
Zwijanie marginesów polega na wybraniu największej wartości z 2 przylegających elementów
z pionowym marginesem ustawionym po bokach.
Dół h1
styka się z górną krawędzią p
,
więc wybrana jest największa wartość dolnego i górnego marginesu h1
p
.
Gdyby reklama h1
miała 3.5rem
dolnego marginesu,
odstęp między nimi wyniósłby 3.5rem
, ponieważ jest większy niż 3rem
.
Zwijają się tylko marginesy bloków, a nie wbudowane (poziome).
Zwijanie marginesów pomaga też w przypadku pustych elementów.
Jeśli w Twoim akapicie górny i dolny margines to 20px
,
utworzy tylko 20px
miejsca, a nie 40px
.
Jeśli jednak cokolwiek zostanie dodane do wnętrza tego elementu,
w tym padding
, jego margines nie będzie się już zwijał i będzie traktowany jak każde pole z zawartością.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat zwijania marży
Jeśli dwa elementy są na siebie nałożone, każdy z nich ma 20 pikseli górnego marginesu. i 30 piks. od dolnego marginesu, ile będzie miejsca między nimi?
Zapobieganie zwijaniu marży
Jeśli element ma
pozycję bezwzględną,
przy użyciu position: absolute
, margines nie będzie już zwijany.
Margines nie zwija się też, jeśli użyjesz właściwości float
.
Jeśli masz element bez marginesu między dwoma elementami z marginesem bloku, margines również się nie zwija, bo te 2 elementy z marginesami bloków nie są już rodzeństwem, a tylko rodzeństwem.
Podczas lekcji dotyczącej układu wiesz już, że kontenery flexbox i siatka są bardzo podobne do kontenerów blokowych, traktują elementy potomne w zupełnie odmienny sposób. Dotyczy to również zwinięcia marży.
Jeśli porównamy oryginalny przykład z lekcji i zastosujemy element flexbox z kierunkiem kolumny, marże się łączą, zamiast zwiniętych. co zapewnia przewidywalność przy pracy nad układem, właśnie dlatego są projektowane kontenery flexbox i siatki.
Zwijanie marginesów i marginesów może być trudne do zrozumienia. ale bardzo przydatne jest poznanie ich sposobu działania, więc ten szczegółowy opis jest zdecydowanie zalecane.
Dopełnienie
Zamiast tworzyć przestrzeń na zewnątrz,
jak margin
,
właściwość padding
tworzy przestrzeń wewnątrz pola:
takich jak izolacja.
W zależności od używanego modelu urządzenia – zostało to omówione
lekcja na temat modelu pudełkowego
– padding
może również mieć wpływ na ogólne wymiary elementu.
Właściwość padding
to skrót od padding-top
, padding-right
, padding-bottom
i padding-left
.
Tak jak margin
, padding
ma też właściwości logiczne:
padding-block-start
, padding-inline-end
, padding-block-end
i padding-inline-start
.
Pozycjonowanie
Omówimy też moduł układu,
Jeśli ustawisz dla position
wartość inną niż static
,
możesz rozsuwać elementy z właściwościami top
, right
, bottom
i left
.
Występują pewne różnice w zachowaniu tych wartości kierunkowych:
- Element z atrybutem
position: relative
zachowa swoje miejsce w przepływie dokumentu, nawet jeśli ustawisz te wartości. Będą one także zależeć od pozycji elementu. - Element z atrybutem
position: absolute
wartości kierunkowe będą opierać się na pozycji względnego elementu nadrzędnego. - Element z atrybutem
position: fixed
wartości kierunkowe będą zależeć od widocznego obszaru. - Element z atrybutem
position: sticky
wartości kierunkowe są stosowane tylko wtedy, gdy jest on zadokowany/niezablokowany.
W module Właściwości logiczne
więcej informacji o właściwościach inset-block
i inset-inline
,
co pozwala ustawić wartości kierunkowe, które mają być zgodne z trybem pisania.
Obie właściwości to skróty łączące wartości start
i end
i jako taki zaakceptuj jedną wartość, która ma być ustawiona jako start
i end
, lub
dwie osobne wartości.
Grid i flexbox
Zarówno w przypadku siatki, jak i Flexbox możesz użyć właściwości gap
, by utworzyć odstęp między elementami podrzędnymi.
Właściwość gap
to skrót od row-gap
i column-gap
,
akceptuje jedną lub dwie wartości, które mogą być długościami lub procentami.
Możesz też użyć takich słów kluczowych jak unset
, initial
i inherit
.
Jeśli określisz tylko jedną wartość,
ten sam element gap
zostanie zastosowany do wierszy i kolumn,
ale jeśli zdefiniujesz obie wartości,
pierwsza wartość to row-gap
, a druga column-gap
.
Zarówno rozwiązanie flexbox, jak i siatka umożliwia tworzenie przestrzeni, korzystając z możliwości rozkładu i wyrównywania które omawiamy moduł siatki oraz moduł Flexbox.
Tworzenie spójnych odstępów
Warto wybrać strategię i trzymać się jej , która pomoże Ci stworzyć spójny interfejs, który jest utrzymany w odpowiednim rytmie i rytm. Dobrym sposobem na osiągnięcie tego celu jest stosowanie spójnych zasad dotyczących odstępów.
Możesz na przykład zdecydować się na używanie 20px
jako spójny środek dla wszystkich luk między elementami – nazywanych rynienkami.
wszystkie układy wyglądają i działają spójnie.
Możesz też ustawić 1em
jako pionowe odstępy między treściami,
co pozwoli uzyskać spójne odstępy na podstawie font-size
elementu.
Niezależnie od wybranej opcji
zapisz te wartości jako zmienne (lub właściwości niestandardowe CSS)
tokenizację tych wartości i ułatwia to zachowanie spójności.
:root {
--gutter: 20px;
--spacing: 1em;
}
h1 {
margin-left: var(--gutter);
margin-top: var(--spacing);
}
Korzystając z takich właściwości, możesz je zdefiniować raz, a potem używaj ich w całej usłudze porównywania cen. Przy aktualizacji lokalnie w elemencie lub globalnie, wartości będą przekazywane kaskadą i zostaną odzwierciedlone zaktualizowane wartości.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat odstępów
Używając kodu HTML, możesz bezpiecznie wstawić odstępy, gdy...
Aby utworzyć pokój wewnątrz pola, użyj tych funkcji:
Aby utworzyć pokój poza polem, użyj tych funkcji:
Aby utworzyć odstęp między prostokątami, użyj tych funkcji: