Css

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.

CSS Kutu Modeli

CSS 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

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.

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap