Bu makalemde CSS’in temel düşünce tarzı olan Kutu Modeli‘ni anlatacağım. Bunu makaleyi css hakkında hiçbir şey bilmeden de anlayabilirsiniz ama tavsiyem önce css nasıl bir şeydir bir gözatmanız. Css’i burada baştan anlatmam mümkün değil. Bu sebeple birkaç dakikanızı ayırıp şu kaynaklara bir göz atınız.

• Mutasyon.Net’in dersler sayfası (Türkçe)
• W3schools (İngilizce)

Gelelim “Kutu Modeli”ne… Css, nesneleri (yazı, resim, link, form bileşeni vs.) birer kutu olarak düşünür. Bu nesnelerin yukarıdan, sağdan, soldan hizalaması, çerçeveleme vb. bir çok işlem kutu modeli ile gerçekleşir. Daha iyi anlayabilmeniz için bu modeli bir resimle anlatmaya çalışayım.

Neden katmanları ingilizce yazdığımı yazımın sonunda belirteceğim. Zaten o ana kadar siz de anlamış olacaksınız.

içerik : Bu herhangi bir resim, yazı, form bileşeni(input gibi) veya link olabilir.
margin: Transparan bir katman olup border’ın dışındadır. Başka nesnelerle sizin içeriğinizin hizalanmasında kullanılabilir.
border: Kutun etrafında çerçeve oluşturmak istedğiniz zaman bunu kullanabilirsiniz. Margin ve padding gibi transparan değildir(yapısını “none” yapmadığınız sürece) Genişlettiğiniz ve bir yapı verdiğiniz anda(solid, dashed…) ekranda görürsünüz bu çerçeveyi.
padding : Margin ile aynı yapıdadır ve transparandır. Farkı ise kutunuzun içeriğinin hizasını dışarıdaki nesneler ile değil border ile oluşturduğunuz çerçeveye göre yapar.

Bu anlattıklarımı bir örnek ile daha iyi anlayabilirsiniz.

Yukarıdaki yazının kodu şu şekildedir

<div style="border: 4px solid ; width: 300px; margin-left: 25px; padding-left: 15px">Bu yazı 300 piksel genişliğinde, soldan margin ile 25 piksel boşluk bırakılarak, border ile 3 piksel genişliğinde çerçeve oluşturularak ve bu çerçevenin içinde soldan padding ile 15 piksellik aralık bırakılarak oluşturulmuştur.</div>

Daha gerçekçi bir örnek wordpress temalarının şablonlarıdır. Tema nasıl yapılır (1)makalemde kullandığım bir resmi örnek alırsak

Buyrun size kutu modeli. Header footer, sidebar, content… hepsi birer kutu olarak düşünülüyor. Birbirleri arasındaki boşluklar margin kullanılarak yapılıyor. İçeriğin (yakuter.com yazan yazılar mesela) hizalaması da padding ile yapılabilir. Dilerseniz container’ın border‘ını solid ile 1 ve üstü piksel genişliğinde yaparsanız bütün sitenin dışında bir çerçeve oluşturabilirsiniz.

Şimdilik bu söylediklerimi kendiniz de deneyerek sonuçları görebilir ve konuyu pekiştirebilirsiniz.

Bir sonraki makalemde internet explorer ile firefox’un bu kutu modelini nasıl farklı yorumladıklarını ve bu farkı css dosyanızla nasıl düzeltebileceğinizi anlatacağım.

Benzer Yazılar

• IE ile W3C’nin CSS Kutu Modeli Farkı
• The Basic Concept Of Css, “Box Model”
• Css İle Gölge Yapımı
• Tarayıcı Uyumluluğu İçin CSS Sıfırlama
• Css İle Sütun Yapısı