Box(Kutu) model'inde dikdörtgensel bir bölge tanımlanır. Bu bölgenin biçimlendirilmesi için bir çok stil sağlanmıştır. Örneğin box'un soldan,sağdan,yukarıdan,aşağıdan uzaklığı, diğer box'larla olan ilişkisi, box'ın içindeki content(içerik) ile olan ilişkisi css ile sağlanır.
Bir box şu bölümlerden oluşur. Content(İçerik) ,Border(Sınır) ve Box'ın koyulduğu box veya sayfa. Bir box'un soldan,sağdan,yukarıdan ve aşağıdan ne kadar uzaklıkta olacağını margin property'si belirler. Content'tin border'a göre uzaklıklıkları padding property'si ile ayarlanır. Border property'si ile box'ın border'ı biçimlendirilir.
Margin
Margin ile box'un çevresinden olan uzaklıklar ayarlanır.
1 <html> 2 <head> 3 <style> 4 div{
5 margin-left:50px;
6 margin-right:20px;
7 margin-top:100px;
8 margin-bottom:40px;
9 background:red;
10 }
11 </style> 12 </head> 13 <body> 14 <div>Bu yazı div içine koyulmuştur. ve box modeli ile çevresinden uzaklıkları ayarlanmaktadır.</div> 15 </body> 16 </html>
Burada box'ın sayfadan uzaklıklarını ayarladık. Background'u kırmızı vererek kutunun boyutlarının daha iyi görünmesini sağlıyoruz. Şimdi ise div tag'inin içindeki yazıların box'tan olan uzaklıklarını ayarlayacağız.
Padding
Şimdi kutunun content'tinin border'lardan olan uzaklıkları ayaralanacak. Bunun için padding property'si kullanılır.
1 <html> 2 <head> 3 <style> 4 div{
5 margin-left:50px;
6 margin-right:20px;
7 margin-top:100px;
8 margin-bottom:40px;
9 padding-left:40px;
10 padding-right:50px;
11 padding-top:20px;
12 padding-bottom:30px;
13 14 background:red;
15 16 }
17 </style> 18 </head> 19 <body> 20 <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> 21 </body> 22 </html>
Border Özellikleri
Kutunun sınırlarını biçimlendirmek için border property'si kullanılır. Kutunun tüm border'ı veya sol,sağ,alt ve üst sınırlarını ayrı ayrı biçimlendirilebilir. border-style ise border'ın biçimi verilir. Bu biçimler none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset'dir. Border'ların genişliği border-width ile verilir. Renk ise border-color ile verilir. Aşağıdaki örnekte tüm border'ları değişik bir görünüm yapıyoruz.
