Yazar: Merhaba değerli okurlarım!
Bu yazımda sizlere css kutu modeli nedir, css kutu modeli nasıl kullanılır bu konuları anlatacağım.
peki o zaman ilk soruyu cevaplayarak başlayalım:
css kutu modeli nedir?
bir html nesnesi kutu gibi davranabilir, işte bu modele kutu modeli ismi verilmektedir. css kutu modelinde bilinmesi gereken 4 özellik yer almaktadır.
Margin: kenarlığın çevresi için verilen boşluk.
Border: kenarlık.
Padding: içten verilen boşluk.
Content: içerik.
Content etiketi içeriğin bulunduğu kısımdır, içerikle kenarlığın arasında verilen boşluk padding ile gösterilir, dış boşluk yani kenarlık arasında verilen boşluğa ise margin ile sağlanmaktadır.
İçeriğin genişliğini ve yüksekliğini ayarlamak için ise, width ve height değerleri kullanılır.
Bir örnek yaparak konuyu daha iyi kavrayalım:
css kod:
.kutu {
Width: 250px;
padding: 10px;
border:5px solid gray;
margin: 10px;
}
Bu örnekte genişlik(width) 250 piksel olarak ayarlanmıştır. Ancak bir html dosyasında bu alan 250 piksel olarak gözükmeyecektir. peki genişlik ve yükseklik değerlerini nasıl hesaplayabiliriz?
250 piksel = Genişlik
20 piksel = Sağdan ve Soldan İç Boşluk (padding 10×2)
10 piksel = Sağ ve Sol Kenarlıklar (border 5×2)
20 piksel = Sağ ve Sol Dış Boşluk (margin 10×2)
300 piksel = Toplam Genişlik
kodlama yaparken genişliği iyi hesap etmek için boşluk, kenarlık ve içerik genişliği toplayarak hesaplamalıyız.
Yüksekliği hesaplarken width değeri yerine height değeri ve boşluk, kenarlıkları toplayarak hesaplamalıyız.
Şimdi dış boşluğu 20 piksel, iç boşluğu 5 piksel, kenarlığı 3 piksel ve genişliği 300 piksel olan bir kutu oluşturalım:
css kod:
.kutu {
/* dış boşluk */
margin: 20px;
/* kenarlık */
border: 3px black solid;
/* iç boşluk */
padding: 5px;
/* genişlik */
width: 300px;
}
Css ile kutu modelini bir örnek daha yaparak pekiştirelim ancak bu örneğimizde html sayfamızıda oluşturacağız.
kutu.html adında bir sayfa oluşturun ve şu kodları içerisine yazın:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> css kutu modeli örneği </title>
<style>
#kutu {
margin: 5px;
border: 3px black solid;
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<div id=”kutu”>
</div>
</body>
</html>
Sizlerde tasarımlarınızda css ile kutu modelini kullanarak farklı tasarımlar elde edebilirsiniz.
Css kutu modeli ile ilgili soru ve sorunlarınızı yorumlarda bana bildirebilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan css form özellikleri ve kullanımı başlıklı makalemizde css formn özellikleri ve kullanımı, css ile html form elemanlarını şekillendirme ve html form elemanlarına stil özelliği kazandırma hakkında bilgiler verilmektedir.