CSS Kutu Modeli (Margin-Border-Padding-Content) – Web Tasarım & Programlama
CSS WEB TASARIMI

CSS Kutu Modeli (Margin-Border-Padding-Content)

Tarafından yazılmıştır AhmetC

Tüm HTML öğeleri kutu olarak kabul edilebilir. CSS’de, ‘kutu modeli’ terimi tasarım ve düzen ile ilgili ayarlamalarda kullanılır.

CSS kutusu modeli temel olarak her HTML öğesinin etrafında dolanan bir kutudur. Margin (Kenar boşlukları), Border (kenarlıklar), Padding (İç Boşluk) ve Content (içerik) lerden oluşur. Aşağıdaki resim kutu modelini göstermektedir:

Yukarıdaki şekli inceleyelim.

Content : Metin ve resimlerin bulunduğu kutunun içeriğidir.

Padding : İçerikle Kenarlık arasında bulunan boşluğu belirtmektedir.

Border : Content ve Padding etrafındaki kenarlıkları belirtir.

Margin : Kutunun etrafındaki boşluğu belirler.

Bu terimler haricinde kutu ile ilgili daha önceden de örneklerimizde kullanmış olduğumuz width (genişlik) ve height (yükseklik) değerleride bulunmaktadır.

Şimdi aşağıdaki örneği inceleyelim. Örneğimizde <div> etiketi ile bir kutu oluşturularak kutu  içerisine bir metin girişi yapacağız.

<div> etiketi için yazdığımız CSS kodlarını inceleyelim.

background-color: lightgrey; Kutu arkaplan rengi gri olarak ayarlandı.

width: 500px; Kutu genişliği 500 piksel olacak şekilde ayarlandı.

border: 25px solid blue; Kenarlık kalınlığı 25px, düz çizgi ve mavi renk olarak ayarlandı.

padding: 25px; Kenarlık ve içerik arasındaki iç boşluk 25px olarak ayarlandı.

margin: 25px; Kutunun kenarlığından itibaren dış boşluk 25px olarak ayarlandı.

Yukarıdaki örnekte padding (İç boşluk) değerlerinde değişiklik yaparak tam olarak neler olduğuna bir göz atalım.

padding: 25px 25px 100px 0px; satırı ile iç boşluğu üstten 25px, sağdan 25px, alttan 100px ve soldan 0px olarak ayarladıktan sonra sayfamız şu şekilde olacaktır.

Şimdi yukarıdaki gibi bir öğenin genişliğinin ve yüksekliğinin nasıl ayarladığına bakalım.

CSS ile bir öğenin genişlik ve yükseklik özelliklerini ayarlarsanız, içerik alanının genişliğini ve yüksekliğini ayarlamış olursunuz. Bir öğenin tam boyutunu hesaplamak için dolgu, kenarlıklar ve kenar boşlukları da eklemeniz gerekecektir.

Örnek olarak aşağıdaki kodları inceleyelim.

Şimdi kutunun toplam genişliğini hesaplayalım.

Genişlik (width) : 360px,
Sol ve sağ iç boşluk (padding) 10+10= 20px
Sol ve sağ kenarlık (border) kalınlığı 5+5=10px
Dış boşluk (margin)=0px

Toplam : 360+20+10=390px olacaktır. Bu değer bizim oluşturduğumuz kutunun(<div>) toplam genişliğidir.

 

Şimdi bunu daha iyi anlamak için aşağıdaki örneği inceleyelim. Sayfamıza 350 px genişliğinde bir resim ekleyerek altına <div> etiketi ile bir kutu oluşturalım. Eklediğimiz bu kutu ile resmin boyutunun eşit olmasını istersek width değerinin nasıl hesaplanması gerektiğine bakalım.

CSS kodlarına baktığımızda <div> etiketinin padding boşluğu sol ve sağ bölüm için 10+10 =20px olacaktır.
Border ayarına baktığımızda 5px değer olduğunu görüyoruz. Bu değer sol kenar ve sağ kenar olarak düşünüldüğünde 5+5= 10px olacaktır. Kutumuzun genişliğinin genişliği 350px olarak verilen resimle aynı olabilmesi için width değeri 350-(20+10)=320px olarak verilmelidir.

 

 

Yorum

Yorum Yap