marginÖzelliği her hangi bir tanımlama sınırlarının bir elemanı etrafında boşluk, dış oluşturma, kutu modelinin en dış kısmını tanımlar.
Kenar boşlukları uzunluklar, yüzdeler veya anahtar sözcük kullanılarak belirlenir autove negatif değerlere sahip olabilir. İşte bir örnek:
.box ( margin: 0 3em 0 3em; )margin steno bir özelliktir ve burada gösterilen en fazla dört değeri kabul eder:
.box ( margin: || || || )Dörtten az değer ayarlanırsa, eksik değerler tanımlananlar temel alınarak varsayılır. Örneğin, aşağıdaki iki kural kümesi aynı sonuçları alacaktır:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Bu nedenle, yalnızca bir değer tanımlanırsa, bu, dört kenar boşluğunu da aynı değere ayarlar. Üç değer bildirilmişse, öyledir margin: (top) (left-and-right) (bottom);.
Tek tek marjlardan herhangi biri uzun el kullanılarak bildirilebilir, bu durumda özellik başına yalnızca bir değer tanımlamanız gerekir:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto ve merkezleme
Kenar boşluğu özelliklerinin her biri bir değerini de kabul edebilir auto. Bir değeri autotemelde tarayıcıya sizin için marjı tanımlamasını söyler. Çoğu durumda, değeri autobir değerine 0(her bir marj özelliği için başlangıç değeridir) veya başka bir şekilde elemanın o tarafında bulunan boşluğa eşdeğer olacaktır . Bununla birlikte, autoyatay merkezleme için kullanışlıdır:
.container ( width: 980px; margin: 0 auto; )Bu örnekte, bu öğeyi mevcut alan içinde yatay olarak ortalamak için iki şey yapılmıştır:
- Elemana belirli bir genişlik verilir
- Sol ve sağ kenar boşlukları
auto
Belirtilen genişlik olmadan, autodeğerlerin esasen hiçbir etkisi olmayacak, sol ve sağ kenar boşluklarını 0ana öğenin içindeki kullanılabilir alan ne olursa olsun ayarlayacaktır .
Aynı zamanda, sivri üzerinden olmalıdır autosadece yatay merkezleme için, kullanılarak çok yararlıdır autobaşlayanlar için kafa karıştırıcı olabilir, dikey bir eleman merkezi olmayacak üst ve alt kenar için.
Daralan kenar boşlukları
Birbirine dokunan farklı öğeler üzerindeki dikey kenar boşlukları (dolayısıyla bunları ayıran içerik, dolgu veya kenarlık içermeyen), bitişik kenar boşluklarından büyük olana eşit tek bir kenar boşluğu oluşturarak daralacaktır. Bu, yatay kenar boşluklarında (sol ve sağ) olmaz, yalnızca dikeyde (üst ve alt) olur.
Göstermek için aşağıdaki HTML'yi alın:
Collapsing Margins
Example text.Ve aşağıdaki CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Bu örnekte, h2öğeye 20 piksellik bir alt kenar boşluğu verilmiştir. Kaynakta onu hemen takip eden paragraf öğesi, 10px olarak ayarlanmış bir üst kenar boşluğuna sahiptir.
Sağduyu h2, paragraf ile paragraf arasındaki dikey kenar kalınlığının toplam 30 piksel (20 piksel + 10 piksel) olacağını düşündürür. Ancak marj çökmesi nedeniyle, gerçek kalınlık 20 piksel olur. Bu, aşağıdaki gömülü kalemde gösterilmiştir:
Daralan kenar boşlukları ilk bakışta sezgisel görünmese de, aslında birkaç nedenden dolayı yararlıdır. İlk olarak, boş öğelerin fazladan, genellikle istenmeyen dikey kenar boşluğu eklemesini önlerler.
İkincisi, sayfa öğeleri arasında evrensel kenar boşlukları bildirmek için daha tutarlı bir yaklaşıma izin verirler. Örneğin, başlıklar genellikle dikey kenar boşluğuna sahiptir ve paragraflar da öyle. Kenar boşlukları daralmadıysa, paragrafları takip eden başlıklar (veya tam tersi), tutarlı bir dikey aralık elde etmek için öğelerden birinin kenar boşluklarının yeniden ayarlanmasını gerektirir.
Üçüncüsü, kenar boşluğu daraltması iç içe yerleştirilmiş öğeler için de geçerlidir. Aşağıdaki kaleme bakın:
Burada, paragraf öğesi 30px olarak ayarlanmış divbir üst kenar boşluğuna sahiptir ve 40px üst kenar boşluğuna sahip bir öğenin içine yerleştirilmiştir . Ek olarak, h2öğenin 20 piksellik bir alt kenar boşluğu vardır.
Yine, sağduyu, buradaki toplam dikey kenar boşluğunun 90 piksel (20 piksel + 40 piksel + 30 piksel) olacağını, ancak bunun yerine kenar boşluklarının hepsinin tek bir 40 piksellik kenar boşluğuna (üçün en yükseği) daralacağını önerecektir. Fazladan dikey boşluğu kaldırmak için üst kenar boşluklarını yeniden tanımlamaya gerek olmadığından bu çoğu durumda yararlıdır.
Negatif Marjlar
Şüphelenebileceğiniz gibi, pozitif bir marj değeri diğer öğeleri uzaklaştırırken, negatif bir kenar boşluğu ya öğeyi o yönde çeker ya da diğer öğeleri ona doğru çeker.
Aşağıda, dolgulu bir kapsayıcı örneği verilmiştir ve başlık h2, kendisini bu dolgudan kenarlara doğru çeken negatif kenar boşluklarına sahiptir:
CodePen'de Chris Coyier (@chriscoyier) tarafından Negatif Kenar Boşlukları için Kalem En Yaygın Kullanım
Örneği'ne bakın.
Aşağıda, ilk paragrafın negatif bir alt kenar boşluğuna sahip olduğu ve sonraki paragrafı yukarı çeken bir örnek var.
CodePen'de Chris Coyier (@chriscoyier) tarafından yazılan Pen Negative Margin alt paragrafını çekerek
görün.
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| İşler | İşler | İşler | İşler | İşler | İşler | İşler |
IE6, çoğu durumda display: inlinekayan öğeye eklenerek çözülebilen iki kat kayan marj hatasına eğilimlidir .