Ujemne marginesy i odstępy między elementami
Przybliżać elementy za pomocą ujemnych marginesów, takich jak -mt-4, oraz używać space-x-* i space-y-* do dodawania odstępów między elementami potomnymi.
Ujemne marginesy i odstępy między elementami to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Czym są ujemne marginesy?
Ujemne marginesy przyciągają element w stronę granic kontenera lub sąsiedniego elementu albo poza te granice. W CSS ujemny margin-top przesuwa element w górę, a ujemny margin-left — w lewo. Tworzy to efekty nakładania i pozwala elementom wyjść poza ich naturalny przepływ dokumentu. Tailwind obsługuje ujemne marginesy za pomocą prefiksu - przed dowolnym narzędziem marginesu.
<!-- Pull an element upward over the previous element -->
<div class="bg-indigo-600 h-32 rounded-t-xl"></div>
<div class="bg-white rounded-xl shadow p-6 -mt-8 mx-4">
This card overlaps the colored header above
</div>Składnia ujemnych marginesów w Tailwind
Aby zmienić dowolne narzędzie marginesu na ujemne, należy poprzedzić je łącznikiem: -mt-4 oznacza margin-top: -16px, a -mx-4 oznacza margin-left: -16px; margin-right: -16px. Obowiązuje ta sama skala odstępów — -mt-1 to -4 px, a -mt-8 to -32 px. W CSS nie można ustawić ujemnego dopełnienia (dopełnienie zawsze jest nieujemne), a jedynie ujemne marginesy.
<div class="bg-blue-600 h-24 rounded-xl"></div>
<div class="-mt-6 ml-6 inline-block bg-white shadow-lg rounded-lg px-6 py-4">
<span class="text-blue-700 font-semibold">Overlapping Badge</span>
</div>Wyjście poza dopełnienie kontenera
Częstym zastosowaniem ujemnych marginesów jest sprawienie, aby obraz o pełnej szerokości wychodził poza kontener z dopełnieniem. Jeśli kontener treści ma px-6 (24 px dopełnienia w poziomie), ujemne -mx-6 na obrazie znajdującym się wewnątrz niego usuwa to dopełnienie, dzięki czemu obraz rozciąga się od krawędzi do krawędzi, podczas gdy otaczający tekst nadal zachowuje dopełnienie. Ta technika jest często stosowana w układach artykułów na blogach.
<article class="max-w-2xl mx-auto px-6">
<h1 class="text-3xl font-bold mb-4">Article Title</h1>
<p class="mb-6">Intro paragraph within the padded container.</p>
<!-- Full-bleed image that breaks out of the padding -->
<img src="wide-photo.jpg" class="-mx-6 w-[calc(100%+3rem)] mb-6" alt="" />
<p>Content continues with normal padding.</p>
</article>Nakładanie elementów kart
Karty profili, karty cenników i karty z wyróżnionymi funkcjami często zawierają awatar lub ikonę, która nachodzi na górną krawędź karty. Należy zastosować ujemny górny margines do treści karty albo ujemny dolny margines do elementu nagłówka, aby utworzyć takie nakładanie. W połączeniu z określonym z-index i narzędziami Tailwind z-* pozwala to kontrolować, który element pojawi się na wierzchu.
<div class="text-center">
<img src="avatar.jpg" class="w-20 h-20 rounded-full border-4 border-white shadow mx-auto" alt="" />
<div class="-mt-10 pt-12 bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-gray-900">Jane Doe</h3>
<p class="text-gray-500 text-sm">Product Designer</p>
</div>
</div>Ujemny margines do wysunięcia siatki
Gdy siatka ma rozciągać się do krawędzi ekranu, zachowując jednocześnie wewnętrzne odstępy, należy użyć ujemnych marginesów poziomych na kontenerze siatki oraz dodatniego dopełnienia na elementach siatki. Ta technika, nazywana czasem siatką z ujemnym marginesem, zapewnia wyrównanie elementów do krawędzi kontenera przy zachowaniu spójnych odstępów między nimi.
<!-- Grid that bleeds to container edges -->
<div class="-mx-4">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 px-4">
<div class="bg-gray-100 p-4 rounded">Item 1</div>
<div class="bg-gray-100 p-4 rounded">Item 2</div>
<div class="bg-gray-100 p-4 rounded">Item 3</div>
</div>
</div>Wprowadzenie do space-x-* i space-y-*
Narzędzia space-x-* i space-y-* dodają margines między sąsiednimi elementami bez dodawania marginesu do pierwszego elementu potomnego. Należy zastosować je do kontenera nadrzędnego, a Tailwind automatycznie doda margin-left do każdego bezpośredniego elementu potomnego oprócz pierwszego. Jest to wygodna alternatywa dla gap-*, gdy nie używa się flex ani grid, lub sposób na dodawanie odstępów między elementami listy.
<!-- space-x-4 adds left margin to every child except the first -->
<div class="flex space-x-4">
<button class="px-4 py-2 bg-gray-100 rounded">Option A</button>
<button class="px-4 py-2 bg-gray-100 rounded">Option B</button>
<button class="px-4 py-2 bg-gray-100 rounded">Option C</button>
</div>space-y-* do układania elementów w pionie
space-y-* dodaje górny margines do każdego bezpośredniego elementu potomnego oprócz pierwszego, tworząc jednolite pionowe odstępy w ułożonej lista. Jest to szczególnie przydatne w menu nawigacyjnych, stosach kart i grupach pól formularzy, gdy potrzebne są spójne odstępy bez dodawania dopełnienia do każdego elementu osobno.
<nav class="space-y-1">
<a href="#" class="block px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg">
Dashboard
</a>
<a href="#" class="block px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 rounded-lg">
Profile
</a>
<a href="#" class="block px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 rounded-lg">
Settings
</a>
</nav>space-* a gap-*
Zarówno space-x-*, jak i gap-x-* dodają poziomy odstęp między elementami potomnymi, ale działają inaczej. space-x-* używa margin-left na elementach potomnych (działa z dowolnym typem wyświetlania), natomiast gap-* używa właściwości CSS gap (działa tylko w kontekście flex lub grid). W układach flex i grid należy używać gap-*, ponieważ poprawnie obsługuje również zawijanie. space-x-* należy stosować, gdy elementy nie znajdują się w kontekście flex/grid.
<!-- In flex: prefer gap -->
<div class="flex gap-4">
<div>A</div><div>B</div><div>C</div>
</div>
<!-- Not in flex/grid: use space-x -->
<div class="space-x-4">
<span class="inline-block">A</span>
<span class="inline-block">B</span>
<span class="inline-block">C</span>
</div>Odwrócone odstępy: space-x-reverse
Podczas używania flex-row-reverse do odwracania kolejności elementów flex space-x-* dodaje margines po niewłaściwej stronie, ponieważ elementy są teraz wizualnie uporządkowane od prawej do lewej. Naprawisz to, dodając space-x-reverse obok space-x-* — przełącza on margines z margin-left na margin-right, aby odpowiadał odwróconemu kierunkowi.
<!-- Reversed flex row with correct spacing -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
<button class="px-4 py-2 bg-gray-100 rounded">Cancel</button>
<button class="px-4 py-2 bg-indigo-600 text-white rounded">Confirm</button>
</div>Praktyka: nakładanie stosu odznak
Stosy awatarów użytkowników (często spotykane w funkcjach współpracy) nakładają awatary na siebie za pomocą ujemnych marginesów. Każdy kolejny awatar ma ujemny lewy margines, który częściowo nakłada go na poprzedni. Zastosuj obramowanie do każdego awatara i użyj hover:z-10, aby umieścić awatar, nad którym znajduje się wskaźnik myszy, na wierzchu stosu. Tworzy to wizualne wrażenie stosu nakładających się awatarów.
<div class="flex">
<img src="user1.jpg" class="w-8 h-8 rounded-full border-2 border-white" alt="" />
<img src="user2.jpg" class="w-8 h-8 rounded-full border-2 border-white -ml-2 hover:z-10" alt="" />
<img src="user3.jpg" class="w-8 h-8 rounded-full border-2 border-white -ml-2 hover:z-10" alt="" />
<div class="w-8 h-8 rounded-full border-2 border-white -ml-2 bg-gray-200 flex items-center justify-center text-xs font-medium text-gray-600">
+5
</div>
</div>Kiedy unikać ujemnych marginesów
Ujemne marginesy są przydatne, ale należy używać ich oszczędnie. Mogą powodować błędy układu, gdy elementy nieoczekiwanie się zwijają lub przelewają, utrudniają zrozumienie kodu podczas przeglądów i mogą kolidować z overflow-hidden elementu nadrzędnego. Preferuj gap-* do odstępów we flexie i gridzie, space-* do odstępów między elementami potomnymi oraz transform -translate-y-* do nakładania elementów wyłącznie wizualnie, bez wpływu na przepływ dokumentu.
<!-- Use transform for visual overlap without flow impact -->
<div class="relative">
<div class="bg-indigo-600 h-24 rounded-t-xl"></div>
<div class="bg-white rounded-b-xl shadow p-6 transform -translate-y-4">
Visually shifted up without changing layout flow
</div>
</div>Szybki sprawdzian
Sprawdź swoją wiedzę na temat zagadnień z Tailwind CSS Mastery omówionych w tej lekcji.
Podsumowanie lekcji
W tej lekcji poznali Państwo: ujemne marginesy, takie jak -mt-4, przesuwają elementy w górę i mogą tworzyć efekty nakładania, space-x-* i space-y-* dodają margines między elementami potomnymi bez wpływu na pierwszy element oraz space-* działa dla dowolnego typu wyświetlania, natomiast gap-* jest preferowane wewnątrz kontenerów flex i grid. Następnie omówimy narzędzia Tailwind do flexboksa, które pozwalają tworzyć zaawansowane układy poziome i pionowe.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Ujemne marginesy i odstępy między elementami” jest bezpłatna?
Tak — pełny tekst „Ujemne marginesy i odstępy między elementami” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Ujemne marginesy i odstępy między elementami”?
Przybliżać elementy za pomocą ujemnych marginesów, takich jak -mt-4, oraz używać space-x-* i space-y-* do dodawania odstępów między elementami potomnymi. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Ujemne marginesy i odstępy między elementami”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Skala odstępów Tailwind
- Narzędzia dopełnienia
- Narzędzia marginesów i marginesy automatyczne
- Ujemne marginesy i odstępy między elementami