--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/odstepy' title: 'Dodaj odstępy wewnątrz elementów i wokół nich | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:58:03+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Dodaj odstępy wewnątrz elementów i wokół nich' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:58:03+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/odstepy' articleSection: 'Stylizuj elementy' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/odstepy' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Stylizuj elementy](/pl/hc/documentation/learn-dxpr-builder/element-settings) # Dodaj odstępy wewnątrz elementów i wokół nich. Poznaj DXPR BuilderBuduj stronyStylizuj elementy ## W tym przewodniku Powiązane przewodniki - [Zmień rozmiar i kolor tekstu](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia) 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](/pl/hc/dokumentacja/nauka-dxpr-builder/pierwsze-kroki/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: | Rozmiar | Użyj do | |---|---| | 8 px | Małe luki w grupie, na przykład ikona i jej etykieta | | 16 px | Między powiązanymi elementami | | 24 px | Między blokami treści | | 32 px | Wewnątrz karty albo wyróżnionego bloku | | 48 px | Między sekcjami | ## 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 ```text +----------------- 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](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/wlasny-css), 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](/pl/hc/dokumentacja/nauka-dxpr-builder/ustawienia-elementu/typografia): dobierz rozmiar i kolor tekstu w rozstawionym bloku.