CSS3 ve HTML Dersleri | BoxModel ve Outline

Kutu Modeli

CSS’de tüm HTML etiketleri veya elemanları genişliği ve yüksekliği olan bir kutu (box) olarak düşünülür. CSS Kutu modeli (BoxModel) bu mantıkla, HTML etiketinin etrafını saran katmanlar dizisi olup, içeriğin kendisi (content), dolgu (padding), kenarlıklar (border) ve kenar boşluklarından (margin) oluşur. Bir elementin toplam genişlik ve toplam yüksekliği, box model (kutu modeli) kavramındaki elemanların büyüklükleri toplamı ile hesaplanır.

Örnek olarak 400px genişliğe ve 100px yüksekliğe sahip bir HTML etiketine verilecek her yönden 20px’lik bir padding, 6px kalınlığında kenarlıklar ve yine her yönden verilecek 20px’lik kenar boşlukları ile bu elementin toplam genişliği 492px genişlik ve 192px yüksekliğe ulaşacaktır. HTML sayfanızda 492 x 192 px’lik bir alan kaplayacaktır.

Yukarıdaki örneğe ait bir <div id=”icerik”> etiketi için CSS dosyası aşağıda verilmiştir.

*{margin:0; padding:0;}

#icerik{
background-color: #13a3ac;
display:inline-block;
border: 6px solid red;
padding:20px;
height:100px;
width:400px;
margin:20px;
}

Outline

Dış çizgi, kontur hattı olarak tabir edilebilir. Bir elemente verilmiş kenarlıkların dış kısmı olarak söylenebilir. Dış çizgi, kutu modeli (box model) mantığına göre genişliği veya yüksekliği değiştirmez. Eğer elemente ait margin değeri verilmişse bu kenar boşlukları içinde görülebilir. Aşağıdaki örnekteki margin değerini kaldırarak değişimleri gözlemleyebilirsiniz.

outline: Elementin  kenarlıklarına veya sınırına dış çizgi verilmesini sağlar.

outline-color: Stil ataması uygulanmış kontur hattının (dış çizgi) rengini belirler. Tüm renk birimleri (hex, rgb gibi) kullanılabilir.

outline-offset: Dış çizginin nereden başlaması gerektiğini belirler. Varsayılan olarak kenarlıklardan sonra başlar. Eğer kenarlık (border) berlirtilmemişse içerik sınırlarından başlayacaktır. Verilen uzunluk değerine göre sınıra uzak noktadan başlayacaktır.

outline-style: Dış çizginin görünümünü belirler. Kenarlıklar ile aldığı değerler aynıdır.

outline-width: Dış çizgi kalınlığını belirler.

Dış çizgi (outline) ile kenarlıklar (border) arasındaki fark; kenarlıklar eklendiği boyutuna göre kutu modelinde genişliği ve yüksekliği arttırır, outline ise herhangi bir şekilde genişlik ve yükseklik büyüklüğüne etki etmez.

Yukarıdaki boxmodel konusu ile bağlantılı olarak verilen örnekte outline (dış çizgi) değeri mavi renki ve 10px’lik bir stil ataması ile gösterilmiştir. Aşağıdaki örnekteki değerleri değiştirerek değişimleri gözlemleyebilirsiniz.

See the Pen boxmodel – outline by Emre (@esencan) on CodePen.

Bir önceki CSS3 ve HTML Dersleri | Genişlik ve Yükseklik konulu yazımı okumak ve ulaşmak için tıklayınız…

Konu anlatımı;