CSS Marj

Bu elementin dış boşluğu 70px'dir.

Kendi Kendine Deney

CSS Marj

CSS margin Özellik, tanımlanmış çerçeve dışında elementin etrafına boşluk oluşturmak için kullanılır.

CSS ile, dış boşlukları tamamen kontrol edebilirsiniz. Birkaç özellik, elementin her kenarına (üst, sağ, alt ve sol) dış boşluk ayarlamak için kullanılabilir.

Margin - Bireysel kenar

CSS, her bir elementin her kenarına dış boşluk belirlemek için özelliklere sahiptir:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Tüm dış boşluk özellikleri aşağıdaki değerleri ayarlayabilir:

  • auto - Tarayıcı dış boşluğu hesaplar
  • length - px, pt, cm gibi birimlerle dış boşluk belirleme
  • % - İçerik eleman genişliğinin yüzdesi olarak dış boşluk belirleme
  • inherit - Anne elemanın dış boşluklarını devral

İpucu:Negatif değerlere izin verilir.

Örnek

<p>元素的 tüm dört kenara farklı dış boşluklar ayarlayın:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Kendi Kendine Deney

Margin - Kısa yazılım özelliği

Kodun kısaltılması için tüm dış boşluk özelliklerini bir özellikte belirtebilirsiniz.

margin Özellik aşağıdaki dış boşluk özelliklerinin kısa yazılım özelliğidir:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Çalışma prensibi budur:

Eğer margin Özellik dört değeri ayarlar:

  • margin: 25px 50px 75px 100px;
    • Üst dış boşluk 25px'dir
    • Sağ dış boşluk 50px'dir
    • Alt dış boşluk 75px'dir
    • Sol dış boşluk 100px'dir

Örnek

margin kısa yazılım özelliği dört değeri ayarlar:

p {
  margin: 25px 50px 75px 100px;
}

Kendi Kendine Deney

Eğer margin Özellik üç değeri ayarladı:

  • margin: 25px 50px 75px;
    • Üst dış boşluk 25px'dir
    • Sağ ve sol dış boşluklar 50px'dir
    • Alt dış boşluk 75px'dir

Örnek

Üç değeri ayarlamak için margin kısa yazılım özelliğini kullanın:

p {
  margin: 25px 50px 75px;
}

Kendi Kendine Deney

Eğer margin Özellik iki değeri ayarladı:

  • margin: 25px 50px;
    • Üst ve alt dış boşluklar 25px'dir
    • Sağ ve sol dış boşluklar 50px'dir

Örnek

İki değeri ayarlamak için margin kısa yazılım özelliğini kullanın:

p {
  margin: 25px 50px;
}

Kendi Kendine Deney

Eğer margin Özellik bir değeri ayarladı:

  • margin: 25px;
    • Tüm dört dış boşluk 25px'dir

Örnek

Bir değeri ayarlamak için margin kısa yazılım özelliğini kullanın:

p {
  margin: 25px;
}

Kendi Kendine Deney

auto değeri

margin Özelliğini} autoçünkü bu, ögenin konteynerinde yatay olarak ortalanmasını sağlar.

Sonra, bu öge belirlenen genişliği kaplayacak ve geri kalan alan, sol ve sağ sınırlar arasında eşit olarak dağıtılacaktır.

Örnek

Kullanma margin: auto：

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Kendi Kendine Deney

inherit Değer

Bu örnek, <p class="ex1"> ögesinin sol dış kenar boşluğunun <div> ebeveyn ögesinden miras alınmasını sağlar:

Örnek

inherit Değerini Kullanma:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

Kendi Kendine Deney

Uzatılmış Okuma

Ek Kitap:Kutu Modeli: CSS Kenar Boşluğu