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

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.