Çalıştırılabilir CSS Dokümanları: CSS margin

Margin nedir

Margin, bir elementin kenarlığının dışındaki boşluktur. Her zaman saydamdır ve görevi diğer elementleri itmektir. Örnekte gri kapsayıcı, mavi kutunun çevresindeki margin'den görünüyor:

<!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>

Gri şerit kutunun parçası değildir: kutunun kendi arka planı kenarlığında biter. Elementin arka planını alan boşluk için padding kullan.

Margin kısa yazımı

margin, padding ile aynı saat yönü sırasında bir ila dört değer alır:

Bildirim	Üst	Sağ	Alt	Sol
`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

Her kenarın ayrıca kendi özelliği (margin-top, margin-right, margin-bottom, margin-left) ve yazı yönünü takip eden mantıksal sürümleri (margin-inline-start, margin-inline-end, margin-block, margin-inline) vardır.

Padding'den farklı olarak margin auto ve negatif değerler kabul eder:

Değer	Örnek	Notlar
Uzunluk	`16px`, `1.5rem`	En yaygını
Yüzde	`5%`	Dört kenarın hepsi için kapsayıcı bloğun genişliğinin
`auto`	`margin: 0 auto`	Tarayıcı kalan boşluğu doldurur
Negatif	`margin-top: -10px`	Elementi ya da komşusunu yaklaştırır, çakışabilir

margin: 0 auto ile ortalamak

margin: 0 auto, bir bloğu yatayda ortalamanın klasik yoludur. İki taraftaki auto, tarayıcıya kalan boşluğu eşit paylaştırmasını söyler. Kapsayıcıdan daha küçük bir genişlik gerekir, yoksa paylaştırılacak bir şey kalmaz:

<!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>

Auto margin'ler normal akışta dikeyde ortalamaz (dikey auto margin'ler 0 olur) ve satır içi elementlerde hiçbir şey yapmaz. Ortalamaya genel bir bakış için div ortalama sayfasına bak.

Margin çökmesi

İki dikey margin birbirine değdiğinde toplanmazlar. Tarayıcı yalnızca büyük olanı tutar. Burada ilk kutuda margin-bottom: 30px, ikincisinde margin-top: 20px var ve aralarındaki boşluk 50px değil 30px:

<!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>

Çökme kasıtlıdır: paragrafların ve başlıkların her birinin kendi boşluğunu taşımasına ve karşılaştıkları yerde bunu ikiye katlamamasına izin verir. İnsanları ikinci bir durumda şaşırtır: bir çocuğun üst margin'i ebeveyninin dışına kaçtığında:

<!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>

İlk ebeveynde çocuğun 30px margin'i ebeveynin üst kenarından dışarı çöktü, bu yüzden içinde gri boşluk oluşturmak yerine bütün ebeveyni aşağı itiyor. Şunlardan herhangi biri bunu durdurur:

Ebeveyne display: flow-root (overflow: hidden'dan farklı olarak hiçbir şeyi kırpmaz).
Ebeveynin üst kenarında padding ya da bir kenarlık.
Flex ya da grid bir ebeveyn: flex ve grid öğelerinin margin'leri asla çökmez.

Yatay margin'ler asla çökmez; float edilmiş ya da absolute konumlandırılmış elementlerin margin'leri de çökmez.

Negatif margin'ler

Negatif bir margin ters yönde çeker. Üst ya da başlangıç tarafında elementin kendisini hareket ettirir; alt ya da bitiş tarafında bir sonraki elementi yaklaştırır. Kutular çakışabilir:

<!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>

Flexbox'ta margin auto

Bir flex kapsayıcının içinde auto margin kendi tarafındaki bütün boş alanı alır. Bir öğeyi satırın en sonuna itmenin en basit yoludur ve flexbox'ta auto dikeyde de çalışır:

<!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 boş alanı "Log in"den önceye koyar; hem soldan sağa hem sağdan sola sayfalarda satırın sonuna.

Sık yapılan hatalar

Genişliği olmayan bir elemente margin: 0 auto. Bir blok zaten kapsayıcısını doldurur; bir width ya da max-width ver.
Satır içi bir elemente margin: auto. Satır içi bırakılan span, a ya da img üzerinde auto margin'ler 0'dır. Onu display: block yap.
İki dikey margin'i toplayıp toplamı beklemek. Büyük olana çökerler; flex ya da grid'de gap kullan ya da tutarlı olarak tek bir margin yönü kullan.
Bir çocuğun margin'inin ebeveynini itmesi. Bu ebeveyn çocuk çökmesidir; ebeveyne display: flow-root ekle.
Arka planı olması gereken boşluk için margin kullanmak. Margin saydamdır; padding kullan.

Sıkça Sorulan Sorular

CSS'te margin nedir?

Margin, bir elementin kenarlığının dışındaki boşluktur. Saydamdır ve komşu elementleri iter. margin ya da tek kenar özellikleri margin-top, margin-right, margin-bottom ve margin-left ile ayarlanır.

margin: 0 auto ne işe yarar?

Üst ve alt margin'leri 0 yapar ve kalan yatay boşluğu sol ile sağ margin'ler arasında eşit olarak paylaştırır; bu da bir blok elementi yatayda ortalar. Elementin kapsayıcısından daha küçük bir genişliğe ihtiyacı vardır, örneğin max-width: 600px.

margin auto elementimi neden ortalamıyor?

Genellikle elementin genişliği olmadığı için (bir blok kapsayıcısını doldurur, bu yüzden paylaştırılacak bir şey kalmaz) ya da element satır içi olduğu için (span, a, img varsayılan olarak öyledir); satır içi elementlerde auto margin'ler 0'dır. Ona bir genişlik ve display: block ver ya da flexbox veya grid ile ebeveynden ortala.

Margin çökmesi (margin collapsing) nedir?

İki dikey margin karşılaştığında, örneğin bir paragrafın alt margin'i ile sonrakinin üst margin'i, tarayıcı onları toplamak yerine yalnızca büyük olanı kullanır. Bu yalnızca normal akıştaki blok kutuların dikey margin'lerinde olur, flex ya da grid düzenlerinde olmaz.

Margin negatif olabilir mi?

Evet. Negatif bir margin elementi o tarafa doğru çeker ya da bir sonraki elementi onun üzerine çeker, böylece kutular çakışabilir. Küçük hizalama düzeltmeleri ve bir elementin kapsayıcısının padding'inin dışına taşmasını sağlamak için kullanışlıdır.

İlgili kavramlar