9css margin

Css Ders 9 | Margin

CSS margin özellikleri, tanımlanmış sınırların dışında, öğelerin etrafında boşluk oluşturmak için kullanılır.

CSS ile kenar boşlukları üzerinde tam kontrole sahip olursunuz. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) kenar boşluğunu ayarlamaya yönelik özellikler vardır.

Margin – Tek Taraflar

CSS, bir öğenin her bir tarafı için margin belirtme özelliklerine sahiptir:

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

Tüm kenar boşluğu özellikleri aşağıdaki değerlere sahip olabilir:

  • auto tarayıcı margini hesaplar
  • length px, pt, cm, vb. cinsinden bir kenar boşluğu belirtir.
  • % – içeren öğenin genişliğinin % ‘si olarak bir kenar boşluğu belirtir
  • inherit – margin üst öğeden inherit gerektiğini belirtir

İpucu: Negatif değerlere izin verilir.

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

Margin – Kısa Kod

Kodu kısaltmak için tüm margin özelliklerini tek bir özellikte belirtmek mümkündür.

margin Özelliği aşağıdaki margin özellikleri için bir kestirme niteliktir:

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

Yani, şu şekilde çalışıyor:

Eğer margin özelliğinde dört değer varsa:

  • margin: 25px 50px 75px 100px;
    • üst kenar boşluğu 25 pikseldir
    • sağ kenar boşluğu 50 pikseldir
    • alt kenar boşluğu 75px
    • sol kenar boşluğu 100px
p {
  margin: 25px 50px 75px 100px;
}

Eğer margin özelliğinde üç değer varsa:

  • margin: 25px 50px 75px;
    • üst kenar boşluğu 25 pikseldir
    • sağ ve sol kenar boşlukları 50 pikseldir
    • alt kenar boşluğu 75px
p {
  margin: 25px 50px 75px;
}

Eğer margin özelliğinde iki değer varsa:

margin: 25px 50px;

  • üst ve alt kenar boşlukları 25 pikseldir
  • sağ ve sol kenar boşlukları 50 pikseldir
p {
  margin: 25px 50px;
}

Eğer margin özelliğinde bir değer varsa:

margin: 25px;

  • dört kenar boşluğunun tümü 25 pikseldir
p {
  margin: 25px;
}

Auto Değeri

Margin auto özelliği, öğeyi bulunduğu element içinde yatay olarak ortalayacak şekilde ayarlar .

Öğe daha sonra belirtilen genişliği kaplar ve kalan boşluk sol ve sağ kenar boşlukları arasında eşit olarak bölünür.

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

İnherit Değeri

Bu örnek, <p class = “ex1”> öğesinin sol kenar boşluğunun üst öğeden (<div>) alınmasına izin verir:

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

Margin Daralması

Öğelerin üst ve alt kenar boşlukları bazen iki kenar boşluğunun en büyüğüne eşit olan kenar boşluğuna daraltılır.

Bu sol ve sağ kenar boşluklarında olmaz! Yalnızca üst ve alt kenar boşlukları!

Aşağıdaki örneğe bakın:

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

Yukarıdaki örnekte, <h1> öğesinin alt kenar boşluğu 50 pikseldir ve <h2> öğesinin üst kenar boşluğu 20 pikseldir.

<h1> ve <h2> arasındaki dikey kenar boşluğunun toplam 70 piksel (50 piksel + 20 piksel) olacağını düşündürür. Ancak margin daralması nedeniyle, gerçek margin 50 piksel olur.

İletişim: admin@herseymi.com
Yazı oluşturuldu 96

Bir Yorum Yazın

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön