Odstęp

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ść to left i right, a trzecia wartość to bottom. (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

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