Tüm HTML etiketleri kutu olarak kabul edilebilir. CSS'de tasarım ve düzen hakkında konuşurken "kutu modeli" terimi kullanılır.
CSS kutu modeli, esasen her HTML etiketini etrafını saran bir kutudur. Box Model şunlardan oluşur: kenar boşlukları (margins), kenarlıklar(borders), dolgu(padding) ve gerçek içerik.
Aşağıdaki resim kutu modelini göstermektedir:
Kutu Modelindeki bölümlerin açıklaması:
Kutu modeli, elemanların etrafına bir sınır eklememize ve elemanlar arasında boşluk tanımlamamıza izin verir.
Kutu Modeli Örneği :
div {
background-color: red;
width: 300px;
border: 15px solid black;
padding: 50px;
margin: 20px;
}
Bir etiketin genişliğini ve yüksekliğini tüm tarayıcılarda doğru şekilde ayarlamak için kutu modelinin nasıl çalıştığını bilmeniz gerekir.
Aşağıdaki div etiketinin toplam genişliği 350 piksel olacaktır:
div {
width: 320px;
padding: 20px;
border: 5px solid gray;
margin: 0;
}
Hesaplama :
Sorular (0)