Dokumentacja CSS z przykładami: Margin

Czym jest margin

Margin to przestrzeń na zewnątrz obramowania elementu. Jest zawsze przezroczysta, a jej zadaniem jest odpychanie innych elementów. W przykładzie szary kontener prześwituje przez margines wokół niebieskiego pudełka:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

Szary pas nie jest częścią pudełka: tło pudełka kończy się na jego obramowaniu. Dla przestrzeni, która ma tło elementu, użyj padding.

Skrócony zapis margin

margin przyjmuje od jednej do czterech wartości, w tej samej kolejności zgodnej z ruchem wskazówek zegara co padding:

Deklaracja	Góra	Prawo	Dół	Lewo
`margin: 10px;`	10	10	10	10
`margin: 10px 20px;`	10	20	10	20
`margin: 10px 20px 30px;`	10	20	30	20
`margin: 10px 20px 30px 40px;`	10	20	30	40

Każda strona ma też własną właściwość (margin-top, margin-right, margin-bottom, margin-left) oraz wersje logiczne, które podążają za kierunkiem tekstu (margin-inline-start, margin-inline-end, margin-block, margin-inline).

W przeciwieństwie do padding margin przyjmuje auto i wartości ujemne:

Wartość	Przykład	Uwagi
Długość	`16px`, `1.5rem`	Najczęstsza
Procent	`5%`	Szerokości bloku zawierającego, dla wszystkich czterech stron
`auto`	`margin: 0 auto`	Przeglądarka wypełnia pozostałą przestrzeń
Ujemna	`margin-top: -10px`	Przyciąga element lub jego sąsiada bliżej, może powodować nachodzenie

Wyśrodkowanie przez margin: 0 auto

margin: 0 auto to klasyczny sposób na wyśrodkowanie bloku w poziomie. auto po obu stronach mówi przeglądarce, żeby podzieliła pozostałą przestrzeń po równo. Potrzebna jest szerokość mniejsza niż kontener, inaczej nie zostaje nic do podzielenia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Marginesy auto nie wyśrodkowują w pionie w zwykłym przepływie (pionowe marginesy auto stają się 0) i nic nie robią na elementach liniowych. Pełny przegląd sposobów wyśrodkowania znajdziesz na stronie jak wyśrodkować diva.

Zapadanie się marginesów

Gdy stykają się dwa pionowe marginesy, nie sumują się. Przeglądarka zachowuje tylko większy. Tutaj pierwsze pudełko ma margin-bottom: 30px, a drugie margin-top: 20px, a odstęp między nimi wynosi 30px, a nie 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

Zapadanie się jest celowe: pozwala akapitom i nagłówkom mieć własne odstępy bez podwajania ich tam, gdzie się spotykają. Zaskakuje jednak w drugim przypadku, gdy górny margines dziecka wydostaje się z rodzica:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

W pierwszym rodzicu margines 30px dziecka zapadł się przez górną krawędź rodzica, więc spycha w dół całego rodzica zamiast tworzyć szarą przestrzeń w jego wnętrzu. Zatrzyma to każde z tych rozwiązań:

display: flow-root na rodzicu (w przeciwieństwie do overflow: hidden niczego nie przycina).
Padding albo obramowanie przy górnej krawędzi rodzica.
Rodzic flex lub grid: marginesy elementów flex i grid nigdy się nie zapadają.

Poziome marginesy nigdy się nie zapadają, podobnie jak marginesy elementów z float lub pozycjonowanych absolutnie.

Ujemne marginesy

Ujemny margines ciągnie w przeciwnym kierunku. Po stronie górnej lub początkowej przesuwa sam element; po stronie dolnej lub końcowej przyciąga bliżej następny element. Pudełka mogą na siebie nachodzić:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto we flexboxie

Wewnątrz kontenera flex margines auto zabiera całą wolną przestrzeń po swojej stronie. To najprostszy sposób, żeby zepchnąć jeden element na sam koniec wiersza, a we flexboxie auto działa też w pionie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto umieszcza wolną przestrzeń przed "Log in", na końcu wiersza zarówno na stronach pisanych od lewej do prawej, jak i od prawej do lewej.

Częste błędy

margin: 0 auto na elemencie bez szerokości. Blok już wypełnia swój kontener; ustaw width albo max-width.
margin: auto na elemencie liniowym. Marginesy auto na span, a lub img pozostawionym jako liniowy wynoszą 0. Nadaj mu display: block.
Dodawanie dwóch pionowych marginesów i oczekiwanie sumy. Zapadają się do większego; użyj gap we flex lub grid albo konsekwentnie jednego kierunku marginesu.
Margines dziecka spychający rodzica. To zapadanie się między rodzicem a dzieckiem; dodaj rodzicowi display: flow-root.
Używanie margin dla przestrzeni, która ma mieć tło. Margin jest przezroczysty; użyj padding.

Najczęściej zadawane pytania

Czym jest margin w CSS?

Margin to przestrzeń na zewnątrz obramowania elementu. Jest przezroczysta i odpycha sąsiednie elementy. Ustawia się ją przez margin albo właściwości dla pojedynczych stron margin-top, margin-right, margin-bottom i margin-left.

Co robi margin: 0 auto?

Ustawia górny i dolny margines na 0, a pozostałą przestrzeń poziomą dzieli po równo między lewy i prawy margines, co wyśrodkowuje element blokowy w poziomie. Element potrzebuje szerokości mniejszej niż jego kontener, na przykład max-width: 600px.

Dlaczego margin auto nie wyśrodkowuje mojego elementu?

Zwykle dlatego, że element nie ma szerokości (blok wypełnia swój kontener, więc nie ma czego dzielić), albo dlatego, że jest liniowy (span, a, img domyślnie), a wtedy marginesy auto wynoszą 0. Nadaj mu szerokość i display: block albo wyśrodkuj go z poziomu rodzica flexboxem lub grid.

Czym jest zapadanie się marginesów?

Gdy stykają się dwa pionowe marginesy, na przykład dolny margines jednego akapitu i górny margines następnego, przeglądarka używa tylko większego z nich zamiast je sumować. Dzieje się to tylko z pionowymi marginesami bloków w zwykłym przepływie, nie w układach flex ani grid.

Czy margin może być ujemny?

Tak. Ujemny margines przyciąga element w stronę tej krawędzi albo przyciąga następny element nad niego, więc pudełka mogą na siebie nachodzić. Przydaje się do drobnych poprawek wyrównania i do wypuszczenia elementu poza padding kontenera.

Powiązane zagadnienia