CSS içerik bulunan bir dikdörtgen bölgeyi biçimlendirme için yöntem sağlamaktadır. Bu yönteme Box Model (Kutu Modeli) adı verilmektedir. Burada aşağıdaki kavramlar kullanılmaktadır :
Aşağıda basit bir kutu örneği görülmektedir :
<html> <head> <style> div{ margin-left:50px; margin-right:20px; margin-top:100px; margin-bottom:40px; background:red; } </style> </head> <body> <div>Bu yazı div içine koyulmuştur. ve box modeli ile çevresinden uzaklıkları ayarlanmaktadır.</div> </body> </html>
yukarıda div elementi kutu şekilnde biçimlendirilmektedir. Kutu çevresindekilere ile soldan 50px , sağdan 20px , üstten 100 px ve alttan 40 px'lik bir uzaklığı olacaktır. Kutunun arkaplan rengi kırmızı olacaktır.
Aşağıda basit bir kutu görülmektedir :
<html> <head> <style> div{ margin-left:50px; margin-right:20px; margin-top:100px; margin-bottom:40px; padding-left:40px; padding-right:50px; padding-top:20px; padding-bottom:30px; background:red; } </style> </head> <body> <div>Bu yazı div içine koyulmuştur. ve box modeli ile box'un çevresinden uzaklıkları ve yazının box'un border'ından uzaklıkları ayarlanmaktadır.</div> </body> </html>
Kutunun dışarısı ile soldan 50 px , sağdan 20 px , üssten 100 px , alttan 40 px'lik uzaklığı olacaktır. Kutunun kenarı ile içeriği arasında ise soldan 40 px , sağdan 50 px , üstten 20 px ve alltan 30 px'lik bir mesafe olacaktır. Kutunun arkaplan rengi kırmızı olacaktır.
Aşağıda basit bir kutu örneği görülmektedir :
<html> <head> <style> div{ margin-left:50px; margin-right:20px; margin-top:100px; margin-bottom:40px; padding-left:40px; padding-right:50px; padding-top:20px; padding-bottom:30px; border-right-style:double; border-right-width:6px; border-right-color:red; border-top-style:outset; border-top-width:10px; border-top-color:green; border-bottom-style:dashed; border-bottom-width:5px; border-bottom-color:yellow; } </style> </head> <body> <div>Bu yazı div içine koyulmuştur. ve tam teşekküllü bir box'dır. Box model'in ne kadar güzel olduğunu göstermektedir.</div> </body> </html>
Yukarıda hem margin hem de padding değerleri ayarlanmıştır. tüm kenarların (alt,üst,sol,sağ) border değerleri farklı verilmiştir.