Beytullah Toprak
CSS Kenarlıklar - CSS Kutu Modeli (Box Model)

CSS Kenarlıklar - CSS Kutu Modeli (Box Model)


Kutu Modeli Nedir?

Görüntülenebilecek her öğe bir veya daha fazla dikdörtgen kutudan oluşur. CSS kutu modeli tipik olarak, bu dikdörtgen kutuların bir web sayfasında nasıl yerleştirildiğini açıklar. Bu kutular farklı özelliklere sahip olabilir ve birbirleriyle farklı şekillerde etkileşime girebilir, ancak her kutuda bir içerik alanı ve isteğe bağlı çevre boşluğu, dolgu ve kenarlık bulunur.

Aşağıdaki diyagram, kenar boşluğunun, dolgunluğun ve kenarlık CSS özelliklerinin bir öğenin web sayfasında ne kadar yer kaplayabileceğini belirlediğini gösterir.

Kutu Modeli

"Kutu modeli", margin (Dış kenar boşluğu), border (Kenar kalınlığı), padding (İç kenar boşluğu) ve içerikten oluşur. Amacı genişliğin ve yüksekliğin nasıl hesaplandığını göstermektir.

Elementlerin Genişliği ve Yüksekliği

Genellikle, bir öğenin genişliğini ve yüksekliğini CSS width ve  height özelliklerini kullanarak ayarladığınızda, gerçekte yalnızca bir öğenin içerik alanının genişliğini ve yüksekliğini ayarlarsınız. Elemanın kutusunun gerçek genişliği ve yüksekliği birkaç faktöre bağlıdır.

Bir elemanın kutusunun alabileceği gerçek alan şöyle hesaplanır:

Kutu Boyutu CSS Özellikleri
Toplam Genişlik widthpadding-leftpadding-rightborder-leftborder-right+margin-left+margin-right
Toplam Yükseklik heightpadding-toppadding-bottomborder-topborder-bottom +margin-top+margin-bottom
div {
    /* Genişlik */
    width: 200px;

    /* Yükseklik */
    height: 100px;

    /* İç boşluk */
    padding: 20px 10px;

    /* Kenarlık */
    border: 5px solid gray;

    /* Dış boşluk */
    margin: 20px 10px;   
}

Genişlik Hesaplama Yöntemi

Toplam Genişlik = width + padding (sağ + sol) + border (sağ + sol) + margin (sağ + sol)

Örneğe göre genişliğimiz: 200px + 20px + 10px + 20px = 250px

Yükseklik Hesaplama Yöntemi

Toplam Yükseklik = height + padding (üst + alt) + border (üst + alt) + margin (üst + alt)

Örneğe göre yüksekliğimiz: 100px + 40px + 10px + 40px = 190px

Not: CSS kutu modelinde; Öğenin kutusunun içerik alanı, metnin, resimlerin, listelerin, tabloların, formların, videoların vb. göründüğü alandır.


Yorum (0)

Hiç Bir Yorum Bulunamadı. İlk Yorumuz Siz Yapın :)

Yorum Yap