Odstępy

Podcast o CSS – 013: odstępy

Załóżmy, że masz zestaw 3 pudełek ułożonych jedna nad drugą, gdzie mieścisz się w odległości. Ile sposobów na to w CSS przychodzi Ci do głowy?

Właściwość margin może dostarczać potrzebne informacje, ale może też powodować dodawanie niepotrzebnych odstępów. Na przykład, jak ustawić kierowanie tylko na odstęp między tymi elementami? W tym przypadku bardziej odpowiednie może być hasło gap. Jest wiele sposobów na dostosowanie odstępów w interfejsie. Każdy z nich ma swoje mocne strony i zastrzeżenia.

Odstępy w HTML

Sam kod HTML udostępnia pewne metody dodawania elementów z kosmosu. Elementy <br> i <hr> pozwalają rozmieścić elementy w kierunku bloku, czyli w języku łacińskim.

Jeśli użyjesz elementu <br>, zostanie utworzony podział wiersza, tak samo jak po naciśnięciu klawisza Enter w edytorze tekstu.

Element <hr> tworzy poziomą linię o nazwie margin ze spacją po bokach.

Oprócz korzystania z elementów HTML elementy HTML mogą tworzyć przestrzeń. Encja HTML to zarezerwowany ciąg znaków (zastępowany przez przeglądarkę znakami). Gdy np. wpiszesz w pliku HTML ©, zostanie on przekonwertowany na znak ©. Encja   jest konwertowana na nierozdzielający znak spacji, który zapewnia spację w tekście. Zachowaj jednak ostrożność, bo niepęknięta cecha postaci łączy ze sobą 2 elementy, co może prowadzić do dziwnych zachowań.

Marża

Jeśli chcesz dodać odstęp na zewnątrz elementu, użyj właściwości margin. Margines jest jak dodanie poduszki wokół elementu. Właściwość margin to skrót myślowy nazw margin-top, margin-right, margin-bottom i margin-left.

Skrócony skrót margin stosuje właściwości w określonej kolejności: góra, prawo, dół i lewo. Możesz zapamiętać te problemy: TRouBLe.

Skrótu margin można też używać z 1, 2 lub 3 wartościami. Dodanie czwartej wartości umożliwia ustawienie każdej strony osobno. Są one stosowane w następujący sposób:

• Jedna wartość zostanie zastosowana do wszystkich stron. (margin: 20px).
• Dwie wartości: pierwsza zostanie zastosowana do górnej i dolnej strony, a druga – do lewej i prawej. (margin: 20px 40px)
• Trzy wartości: pierwsza wartość to top, druga wartość to left oraz right, a trzecia to bottom. (margin: 20px 40px 30px).

Margines można określić za pomocą długości, wartości procentowej lub wartości automatycznej, np. 1em lub 20%. Jeśli użyjesz wartości procentowej, zostanie ona obliczona na podstawie szerokości bloku zawierającego element.

Oznacza to, że jeśli blok elementu, który zawiera, ma szerokość 250px, a wartość margin tego elementu to 20%: każda strona elementu będzie miała obliczony margines równy 50px.

Możesz też użyć wartości auto jako marży. W przypadku elementów na poziomie bloku o ograniczonym rozmiarze margines auto zajmie dostępne miejsce w kierunku, w którym zostanie zastosowany. Dobrym przykładem jest moduł Flexbox, w którym elementy odpychają się 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 kolumny środkowej w witrynie.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

W tym przypadku margines został usunięty z górnej i dolnej (w tekście), a auto dzieli odstęp między lewą i prawą stroną (w tekście).

Marża ujemna

Wartości ujemne mogą być również używane do określania marży. Zamiast dodawać odstęp między sąsiednimi elementami, zmniejsza to odstęp między nimi. Jeśli zadeklarujesz wartość ujemną, która jest większa niż dostępne miejsce, może to prowadzić do nakładania się elementów.

Zwinięcie marginesu

Zwijanie marginesów to dość skomplikowana koncepcja, ale natknie się na nią bardzo często podczas tworzenia interfejsów. Załóżmy, że masz 2 elementy: nagłówek i akapit z pionowym marginesem.

<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 wydaje się, że akapit z nagłówkiem będzie oddzielony 5em od nagłówka, bo wartości 2rem i 3rem są sumowane do 5rem. Ponieważ jednak pionowy margines zwija się, spacja ma w rzeczywistości wartość 3rem.

Zwijanie marginesów wybiera największą wartość z 2 przylegających do siebie elementów, a po sąsiadujących stronach jest ustawiony margines pionowy. Dolna część h1 styka się z górną krawędzią p, dlatego wybierana jest największa wartość dolnego marginesu h1 i górnego marginesu: p. Gdyby element h1 miał 3.5rem dolnego marginesu, odstęp między nimi miałby 3.5rem, bo ta wartość jest większa niż 3rem. Blokuj wyłącznie zwijanie marginesów, a nie marginesy wbudowane (poziome).

Zwijanie marginesów pomaga też w przypadku pustych elementów. Jeśli akapit z górnym i dolnym marginesem to 20px, utworzy się tylko 20px odstępu, a nie 40px. Jeśli jednak w środku tego elementu dodasz cokolwiek, w tym atrybut padding, jego margines nie będzie się zwijał i będzie traktowany jak dowolne pole z zawartością.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat zwijania marginesów

Zapobieganie zwijaniu marginesów

Jeśli ustawisz element bezwzględny, używając właściwości position: absolute, margines nie będzie już zwijany. Margines też nie zostanie zwinięty, jeśli użyjesz właściwości float.

Jeśli masz element bez marginesu między dwoma elementami z marginesem bloku, margines się też nie zwinie, bo oba elementy z marginesem blokowym nie są już nadrzędne – są po prostu bliźniakami.

Dzięki lekcji układu dowiedzieliśmy się, że kontenery Flexbox i siatki są bardzo podobne do kontenerów blokowych, ale różnią się pod względem obsługi ich elementów podrzędnych. Dotyczy to także zwijania marginesu.

Jeśli użyjemy oryginalnego przykładu z lekcji i zastosujemy element flexbox z kierunkiem kolumny, marginesy zostaną połączone, a nie zwinięte. Może to zapewnić przewidywalność układu, do czego służą kontenery Flexbox i siatka.

Interpretowanie wartości marży i zwijania marginesów może być trudne, ale warto dokładnie zrozumieć, jak one działają, dlatego zdecydowanie zalecamy to szczegółowe wyjaśnienie.

Dopełnienie

Zamiast tworzyć przestrzeń na zewnątrz, jak ma to miejsce w przypadku margin, właściwość padding tworzy przestrzeń wewnątrz opakowania, np. w obrębie izolacji.

W zależności od używanego modelu pola (który omówiliśmy w lekcji o modelu pola) padding może też wpływać na jego ogólne wymiary.

Właściwość padding to skrót od: padding-top, padding-right, padding-bottom i padding-left. padding, tak jak margin, ma też właściwości logiczne: padding-block-start, padding-inline-end, padding-block-end i padding-inline-start.

Pozycjonowanie

Informacje o tym są też opisane w module układu. Jeśli ustawisz dla position wartość inną niż static, możesz rozmieścić elementy z właściwościami top, right, bottom i left. Istnieją 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 też zależeć od pozycji elementu.
• Element z atrybutem position: absolute opiera się na wartościach kierunkowych na podstawie pozycji względnego elementu nadrzędnego.
• Element z atrybutem position: fixed będzie opierać się na wartościach kierunkowych na widocznym obszarze.
• Element z atrybutem position: sticky stosuje wartości kierunkowe tylko wtedy, gdy jest zadokowany lub zablokowany.

W module Właściwości logiczne poznasz właściwości inset-block i inset-inline, które umożliwiają ustawienie wartości kierunkowych zgodnych z trybem pisania.

Obie właściwości są skrótami łączącymi wartości start i end. Dlatego przyjmują 1 wartość do ustawienia dla start i end lub 2 pojedyncze wartości.

Siatka i flexbox

I wreszcie, zarówno w siatce, jak i flexbox, możesz używać właściwości gap do tworzenia odstępów między elementami podrzędnymi. Właściwość gap to skrót od właściwości row-gap i column-gap. Może przyjmować 1 lub 2 wartości, którymi mogą być długości lub wartości procentowe. Możesz też użyć słów kluczowych takich jak unset, initial i inherit. Jeśli zdefiniujesz tylko jedną wartość, zarówno w wierszach, jak i w kolumnach, zostanie zastosowana ta sama wartość gap, ale jeśli zdefiniujesz obie wartości, pierwsza wartość będzie wynosić row-gap, a druga – column-gap.

Zarówno w przypadku Flexbox, jak i siatki, możesz też utworzyć przestrzeń za pomocą funkcji rozkładu i wyrównywania, które omówimy w modułach siatki i flexbox.

Tworzenie spójnych odstępów

Dobrym pomysłem jest wybór strategii i trzymanie się jej, aby stworzyć spójny, płynny interfejs. Możesz to osiągnąć, stosując spójne pomiary odstępów.

Możesz na przykład zdecydować się na użycie 20px jako spójnego sposobu pomiaru wszystkich luk między elementami (tzw. rynien), aby wszystkie układy wyglądały i były spójne. Możesz też użyć 1em jako pionowych odstępów między treściami w przepływie, aby uzyskać stałe odstępy zgodnie z font-size elementu. Niezależnie od wybranej opcji możesz zapisać te wartości jako zmienne (lub niestandardowe właściwości CSS), aby tokenizować te wartości i ułatwić sobie ich tworzenie.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

Takie właściwości pozwalają określić je raz, a potem używać w całym kodzie CSS. Przy aktualizacji (lokalnie w obrębie elementu lub globalnie) wartości są przekazywane przez kaskadę, a zaktualizowane wartości są odzwierciedlane.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat spacji