Dodaj odstępy wewnątrz elementów i wokół nich.

Daj tekstowi miejsce wewnątrz kolorowego bloku albo odsuń przycisk od akapitu powyżej. Padding to przestrzeń wewnątrz krawędzi elementu; margin to przestrzeń na zewnątrz. Oba ustawisz w modelu pudełkowym u góry panelu Styl. Twój motyw i nowa sekcja przynoszą własne odstępy; ta strona pokazuje, jak wpasowują się twoje.

Film nadaje przyciskowi górny margines 24 px.

Zanim zaczniesz

• Otwórz stronę w DXPR Builder; wskazanie elementu pokazuje jego pasek sterowania z opcją More. Nowy w kreatorze? Zobacz Twoja pierwsza strona.
• Zapisz w oknie zachowuje zmianę w edytorze. Zapisz na pasku narzędzi kreatora nad treścią zapisuje stronę i pokazuje „Saved field”.
• Użyj modelu pudełkowego, aby naprawić jedną lukę na jednej stronie.
• Użyj motywu albo klasy do odstępów, które się powtarzają, na przykład luki między wszystkimi sekcjami.
• Trzymaj się skali. Strony wyglądają spokojnie, gdy każda luka pochodzi z kilku rozmiarów:

Przepis: miejsce wokół przycisku

1. Najedź na przycisk, kliknij More, a potem Settings.
2. Otwórz panel Styl i kliknij górny bok marginesu, zewnętrzny pierścień modelu pudełkowego. Kłódki zaczynają otwarte, więc zmienia się tylko ten bok.
3. Sprawdź, czy przycisk jednostki pokazuje PX. Wpisz 24 w polu wartości i naciśnij Enter. Bok pokazuje teraz 24px, a przycisk przesuwa się w dół.
4. Kliknij Zapisz w oknie, a potem Zapisz na pasku narzędzi.

Na przycisku margines siedzi na samym przycisku, więc przestrzeń zaczyna się zaraz przy jego krawędzi.

Przepis: wyższa sekcja

Nowa sekcja dostaje górny i dolny padding z klasy Vertical padding size 5 (py-5), która bije model pudełkowy. Najpierw usuń tę klasę. Sprawdź, czy tytuł okna brzmi Section, nie Row ani Column.

1. Najedź na sekcję, kliknij More, a potem Settings.
2. W panelu Ogólne znajdź HTML classes i kliknij × na chipie Vertical padding size 5 (py-5). Sekcja traci trochę miejsca u góry i u dołu. Jeśli nie ma takiego chipa, pomiń ten krok.
3. Otwórz panel Styl. Kliknij górny bok Padding, wpisz 96 i naciśnij Enter.
4. Zrób to samo dla dolnego boku Padding. Oba boki pokazują teraz 96px, a sekcja rośnie.
5. Kliknij Zapisz w oknie, a potem Zapisz na pasku narzędzi.

Co widzisz

Każdy ustawiony bok pokazuje swoją wartość w modelu pudełkowym, na przykład 24px. Przycisk siedzi 24 px niżej, a sekcja ma 96 px miejsca nad i pod treścią.

Jak działa model pudełkowy

+----------------- Margin ------------------+
|  +-------------- Border ---------------+  |
|  |  +----------- Padding ------------+ |  |
|  |  |                                | |  |
|  |  |         width × height         | |  |
|  |  |                                | |  |
|  |  +--------------------------------+ |  |
|  +-------------------------------------+  |
+-------------------------------------------+

• Każdy pierścień ma cztery boki. Bok pokazuje swoją wartość, na przykład 24px, albo „-”, gdy nie jest ustawiony.
• Kliknij bok, aby otworzyć mały selektor z suwakiem, polem wartości i przyciskiem jednostki. Jednostka to PX albo %; Border przyjmuje tylko px.
• Wpisz wartość i naciśnij Enter albo przeciągnij suwak. Klawisze strzałek w górę i w dół zmieniają wartość o 1. Escape zamyka selektor.
• Aby cofnąć ustawienie boku, opróżnij pole wartości i naciśnij Enter. Bok pokazuje „-” i znów decyduje twój motyw.

Margines biegnie od -200 do 200, padding od 0 do 200, a ramka od 0 do 50. Szerokość i wysokość biegną od 0 do 2000. Ujemny margines ciągnie element ku sąsiadowi. Wpisana wartość spoza zakresu jest obcinana do najbliższego limitu.

Kłódki

Każdy pierścień ma kłódkę obok nazwy: Margin, Border i Padding. Gdy kłódka jest zamknięta, wartość ustawiona na jednym boku przechodzi na wszystkie cztery. Gdy jest otwarta, każdy bok zachowuje własną wartość. Zamknięcie kłódki nie zmienia posiadanych wartości; kopiowana jest tylko kolejna ustawiona wartość.

Procenty, rozmiar i szerokość ekranu

Wartość procentowa to udział szerokości rodzica elementu, także u góry i u dołu. Zatem 10% górnego paddingu jest wyższe w szerokiej kolumnie niż w wąskiej.

Środek modelu pudełkowego trzyma szerokość × wysokość. Elementy, które same dobierają rozmiar, na przykład Image i Map, ignorują te dwa pola.

Model pudełkowy nie ma wartości na rozmiar ekranu. Aby dodać więcej paddingu na dużych ekranach niż na telefonach, użyj zamiast tego klas Bootstrapa. Na przykład py-3 py-lg-5 daje 16 px na mniejszych ekranach i 48 px od 992 px szerokości. Zobacz HTML ID i klasy, jak je wpisywać.

Jak twoje wartości spotykają się z odstępami motywu

• Nowe sekcje przynoszą padding. Sekcja dodana w edytorze dostaje klasę Vertical padding size 5 (py-5): 3rem, około 48 px, u góry i u dołu. Klasa jest oznaczona !important, więc bije twój górny i dolny Padding. Lewy i prawy padding nadal działają.
• Klasy odstępów wygrywają. Każda bootstrapowa klasa odstępów w polu HTML classes, na przykład Top margin size 3 (mt-3), bije twoją wartość na tym samym boku.
• Kolumny zachowują lukę. Bootstrap daje każdej kolumnie 12 px paddingu po lewej i prawej. Lewy albo prawy Padding na kolumnie go zastępuje, więc treść nie wyrównuje się już z sąsiednią kolumną.
• Akapity zachowują własne odstępy. Twój motyw kładzie przestrzeń pod każdym akapitem i nagłówkiem. Model pudełkowy nie zmienia tej przestrzeni, ponieważ działa na elemencie jako całości.
• Marginesy sąsiadów zwykle się nakładają. Gdy jeden element stoi nad drugim, dolny margines pierwszego i górny margines drugiego dzielą lukę. Wygrywa większy; nie sumują się.

Jeśli go nie widać

• Górny albo dolny padding na sekcji nic nie daje. Klasa Vertical padding size 5 (py-5) wygrywa. Usuń jej chip w polu HTML classes.
• Wartość marginesu albo paddingu nic nie daje. Bootstrapowa klasa odstępów na tym samym boku wygrywa. Usuń jej chip albo używaj tylko klasy.
• Padding się nie pokazuje. Element nie ma tła ani ramki, więc przestrzeń jest niewidzialna. Wybierz kolor Tła, gdy go dostosowujesz.
• Wartość skoczyła do 200. Padding i margines kończą się na 200, ramka na 50. Użyj mniejszej wartości albo procentu.
• Strona jest ciasna na telefonach. Ta sama wartość w pikselach obowiązuje na każdym ekranie. Użyj mniejszych wartości, procentu albo klas responsywnych.
• Dwie luki się nie zsumowały. Ułożone marginesy nakładają się i wygrywa większy. Nałóż całą lukę na jeden z dwóch elementów.
• Kolumny już się nie wyrównują. Boczny Padding na kolumnie zastąpił lukę siatki. Opróżnij te boki ponownie.

Co dalej?

• Typografia: dobierz rozmiar i kolor tekstu w rozstawionym bloku.