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.
Renkledirmeler harika olmuş