Margin (Kenar) Özellikleri
Margin özelliği CSS’de seçilmiş bir elementin sınırının dışarı doğru mesafesini ifade eder. Daha başka bir tanımla HTML elementlerinin arasındaki dış mesafeyi belirlemek için kullanılan uzunluk ölçüleridir. Genellikle değerleri pixel (px) cinsinden belirtilir ve kullanılır. Yukarıdaki resmi incelediğimizde bir elementin içeriği lila renginde gösterilmiştir. Örneğin bu bir paragraf <p> etiketi olsun. Doğal olarak bu etikete ait dış sınırlar var ki bu yukarıdaki resimde kırmızı renkle gösterilmiş olan (border) kenarlıklardır. Margin özelliği değeri bu kenarlıklardan dışa doğru olan mesafedir.
Margin deklarasyonu px, cm, pt, etc, yüzdelik (%), bir üst elementten kalıtsal olarak alınmasını sağlayan inherit ve tarayıcının durumuna göre block seviyesindeki elementler için auto değeri alabilirler. Auto değeri sağ ve sol (left, right) olarak eşit uzaklıkta (ortalanacak şekilde) margin özelliği değeri atamak için kullanılır. Margin özelliği değerleri “-” (eksi/negatif) olabilirler. Mantık olarak margin-left: değeri – olması demek, verilen değer kadar sola uzaklaşmak yerine yakınlaşmak anlamına gelecektir. Örnek olarak sayfanın soluna tamamen yaslanmış olan bir elemente/etikete margin-left değeri – verilirse verilen değer kadar sol taraftan sayfanın dışına çıkacaktır, dolayısıyla gözükmeyecektir.
Örnek olarak aşağıda verilen html ve css dosyalarını inceleyelim…
<!DOCTYPE html> <html> <head> <title>Margin Özellikleri</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="box1"> <h2>Margin değeri 20px verilmiş, her yöne uygulanmış.</h2> </div> <hr> <div class="box2"> <p>Margin değeri yukarıdan 50px, soldan, 100px, sağdan 0, ve alttan 20px verilmiştir.</p> </div> <hr> <div class="box3"> <p>Margin değeri auto verildiğinden sağdan ve soldan eşit uzaklık olacak şekilde ayarlandı. Tarayıcınızın genişliğine göre kendini ortada kalacak şekilde tutacaktır.</p> </div> <hr> <div class="box4"> <p>Margin değeri %50 verilmesinden dolayı sayfa genişliğinin orta noktasından itibaren konumlandırır.</p> </div> <hr> <div class="box5"> <p>Margin değeri kısa yazım metoduyla verilmiştir. üst kenardan 50px, sağ kenardan 0, alt kenardan 20px ve sol kenardan 100px verilmiştir.</p> </div> <hr> <div class="box6"> <p>Margin değeri için üst elementten geleni doğrudan uygulanması tercih edilirse inherit değeri kullanılır. DIV etiketi için uygulanan 50px'lik değer içindeki paragraf etiketinede uygulanmış oldu</p> </div> <hr> <div class="box7"> <p>Margin değeri negatif olabilir. Bu zaman belirtilen yöne doğru uzaklaşmak yerine yakınlaşacaktır.</p> </div> </body> </html>
Margin Değerlerinin Sıfırlanması
HTML’de bir çok elemente varsayılan olarak margin değerleri atanmıştır. Örneğin bir başlık <h2> etiketinin üstten ve alttan margin değerleri varsayılan olarak sıfır değildir. Bir başka etiket olan paragraf <p> için yine üst ve alt margin değerleri sıfır değildir. Tasarımlarımızda sayfa boyutlarını daha efektif kullanabilmek ve hesaplayabilmek için CSS’de bu varsayılan değerlerin resetlenmesine ihtiyaç duyulur. CSS reset (sıfırlama) konusu daha detaylı olarak anlatılacaktır. Bu dersimizin konusu olan margin için basit bir sıfırlama örnekte verilmiştir.
body{
margin:0;
padding: 0;
}
p, h2{
background-color: lightblue;
margin:0;
}
Yukarıdaki örnekte body etiketine margin ve padding değerleri sıfır atanarak diğer örneklerde verilen tüm elementlerin sayfanın kenarlarına tamamen yaslanmış olarak margin değerlerinin uygulanması sağlanmıştır. Ayrıca yukarıdaki HTML dosyası içerisinde yer alan tüm paragraf <p> ve h2 seviyesindeki başlık etiketlerine <h2> arkaplan rengi olarak açık mavi renk uygulanarak, bu elementlerin margin değerleri de sıfırlanmış (reset) oldu.
Margin
İlk örneğimizde standart margin deklarasyonun kullanımını gösterdik. Bu örnekte .box1 class seçicisine her yönden 1px kalınlığında düz çizgi şeklinde rengi kırmızı olan kenarlıklar atanarak, 700px’lik bir genişlik verilmiştir. Margin: 20px; değeri atanarak kırmızı renkteki kenarlıklardan (border) üst,sağ,alt ve sola doğru 20px’lik boşluk verilerek konumlandırılmıştır.
/* Margin */
.box1{
border:1px solid red;
width: 700px;
margin: 20px;
}
Margin Yönleri
Margin değeri yukarıdaki maddedeki gibi tek argüman ile verileceği gibi, her yön farklı uzaklıklara sahip olacak şekilde stil ataması yapılabilir. Bu yönleri ifade etmek için top (üst), right (sağ), bottom (alt), left (sol) terimleri kullanılır.
/* Margin Yönler*/
.box2{
border: 1px solid red;
width: 700px;
margin-top: 50px;
margin-left: 100px;
margin-right: 0;
margin-bottom: 20px;
}
Bu örnekte yukarıdan 50px, sağdan 0px, alttan 20px ve soldan 100px’lik margin değeri verilerek stil ataması yapılmıştır.
Margin: auto;
Margin özelliğine auto değerinin verilmesi kısaca ortalama işlemini gerçekleştirir. Çalışma mantığı tarayıcınızın genişliğine göre sağdan ve soldan eşit uzaklık olacak şekilde margin değeri verir, haliyle stil uygulanan etiket ortalanmış olur.
/* Margin Auto */
.box3{
border: 1px solid red;
width: 700px;
margin: auto;
}
Margin Değerinin Yüzdesel Olması
Margin özelliği yüzdesel değerler alabilirler. Çalışma mantığı örneğin bir etiket için margin-left değeri %50 verilmişse, bu etiket sayfa genişliğinin tam orta noktasından başlayacak şekilde sağ tarafa doğru konumlandırılır. Tüm etiketlerin konumlandırması sayfanın sol tarafına göre yapılacağından bu örnekte margin-right: 50%; olarak kullanılsaydı herhangi bir sonuç vermeyecekti. Sonucu görebilmek için .box4 class seçicisi float:right; deklarasyonuyla önce sağa yaslanmalı ve sonrasında margin-right: 50% değeri verilerek .box4 class seçicisinin sağ tarafının sayfanın ortasına konumlandığını görebilirdiniz.
/* Margin: Yüzdesel */
.box4{
border: 1px solid red;
width: 700px;
margin-top: 20px;
margin-left: 50%;
}
Margin Deklarasyonunun Kısa Yazılması
Margin özelliğinin tek argüman almasıyla bu değerin tüm yönlere uygulandığı önceki maddelerde belirtildi. Eğer margin özelliği 2 veya 3 argüman alsaydı ne olurdu? CSS’te değerler üst yönden veya köşeler ile ilgiliyse de sol üst köşeden başlayarak saat yönünde döner. 4 yönü temsil eden 4 argüman bulunur en fazla. Eğer deklarasyon 2 argüman almışsa (Ör: margin: 20px 30px) ilk argüman kurala göre üstten 20px uzaklık verir, 2nci argüman sağ kenardan 30px uzaklık olarak değerlendirilir. Ataması yapılmayan alt kenar ve sol kenar karşı kenarlara ait değerleri alırlar. Sonuç olarak stil ataması yapılmayan 3ncü (alt kenar) üst kenarın değeri olan 20px’i, 4ncü argüman (sol kenar) ise 2nci argümanın (sağ kenarın) değeri olan 30px’i alır.
3 argüman almış bir deklarasyonda tanımlaması yapılmayan 4ncü argüman olan sol kenar, 2nci argüman olan sağ kenarın değerini alacaktır. Kural olarak ataması yapılmayan kenarlar karşı kenarın değerini, ataması yapılmayan köşeler ise çapraz karşı köşesinin değerini alır.
/* Margin Kısa yazılması ve saat yönü kuralı */
.box5{
border: 1px solid red;
width: 700px;
margin: 50px 0px 20px 100px;
}
Yukarıdaki örnekte margin değeri 4 argüman olarak verilmiş ve üst margin (margin-top) 50px, sağ margin (margin-right) 0px, alt margin (margin-bottom) 20px ve son olarak sol margin (margin-left) 100px margin değeri almıştır.
Margin: inherit; Kullanımı
Bu özellik kalıtımsal değerin kullanılması olarak tanımlanabilir. Kalıtımsal, uygulanan etikete kendisinin ebeveyni olan etikete atanmış margin değerinin aynısına sahip olması anlamına gelir.
/* Margin inherit değeri kullanımı*/
.box6{
border: 1px solid red;
width: 700px;
margin: 50px;
}
.box6 p{
margin: inherit;
}
Yukarıdaki örnek incelendiğinde .box6 class seçicisine margin değeri 50px atanmıştır. Classı box6 olan <div> etiketi içinde bulunan bir paragraf etiketine margin inherit değeri atanarak, ebeveyn etiketi olan div class box6 etiketine atanan 50px’lik margin değeri aynı şekilde paragraf <p> etiketine de ayrıca uygulanmış oldu.
Margin “-” Negatif Değerle Kullanımı
Margin değerleri negatif değerler alabilir. Normalde margin kendisini diğer etiketlerden uzaklaştırma (boşluk verme) mantığına dayalı olmasından dolayı negatif değer almasıda yakınlaştıracağı anlamına gelmektedir. Örnek olarak sayfanın sol tarafına margini 0 olan bir etikete eğer – değerli bir margin değeri verilirse, verilen değer kadar uygulanan etiket sol tarafa kayacak ve sayfanın dışına taşan kısmı gözükmeyecektir. Veya aynı mantıkla margin-top: değeri negatif verilen bir etiket kendisini bulunduğu konumdan üste kaydırarak konumlanacak belkide üstündeki etiketin üstüne çıkacak şekilde konumlanacaktır.
/* Margin Negatif "-" Değer Alması */
.box7{
border: 1px solid red;
width: 700px;
padding: 20px;
margin-top: -50px;
}
Bir önceki CSS3 ve HTML Dersleri | Kenarlık (Border) Özellikleri konulu yazıma ulaşmak için tıklayınız…
Son Yorumlar