CSS Kutu Modeli – Box Model – Yazılım Bilişim Programlama

Tüm HTML öğeleri kutu olarak kabul edilebilir. CSS’de, “kutu modeli” terimi tasarım ve düzen hakkında konuşurken kullanılır.

Her öğe dikdörtgen bir kutudur ve kutunun boyutunu belirleyen birkaç özellik vardır. Aşağıdaki şekil bu kutuyu oluşturan yapıları göstermektedir.

Kutu modelinin her bölümü birer CSS özelliğine karşılık gelir.

width : Kısaca kutunun genişliğidir. Detaylı bilgi için CSS Yükseklik ve Genişlik
height : Kısaca kutunun sahip olduğu yüksekliktir. Detaylı bilgi için CSS Yükseklik ve Genişlik
padding : Kutunun iç boşluğudur.Detaylı bilgi için CSS Padding Kullanımı
border : Kutunun sınırlarıdır. Detaylı bilgi için CSS Kenarlıklar
margin : Kutunun etrafındaki dış boşluktur. Detaylı bilgi için CSS Margin Kullanımı

Bu özelliklerin kullanıldığı bir HTML öğesini ele alalım


<!DOCTYPE html>
<html>
<head>
<style>
    div{
      background-color: green;
      border: 50px solid #949599;
      height: 100px;
      margin: 90px;
      padding: 70px;
      width: 300px;
    }
</style>
</head>
<body>

    <div>Bu div öğesidir.</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div{

background-color: green;

border: 50px solid #949599;

height: 100px;

margin: 90px;

padding: 70px;

width: 300px;

}

</style>

</head>

<body>

<div>Bu div öğesidir.</div>

</body>

</html>

Kutu modeli, öğelerin etrafına bir kenarlık eklememize ve öğeler arasında boşluk tanımlamamızı sağlar.

Kutunun Genişliği ve Yüksekliği

Bir öğenin genişliğini ve yüksekliğini tüm tarayıcılarda doğru bir şekilde ayarlamak için, kutu modelinin nasıl çalıştığını bilmeniz gerekir.

Önemli: CSS ile bir öğenin genişlik ve yükseklik özelliklerini ayarlarsanız, içerik alanının genişliğini ve yüksekliğini ayarlamış olursunuz . Bir öğenin tam boyutunu hesaplamak için dolgu, kenarlıklar ve kenar boşlukları da eklemeniz gerekir.

Örnek;

Bir <div> öğesinin toplam genişliği 350 piksel olacak şekilde stil ayarlamak istediğinizi varsayalım:


<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 320px;
        padding: 10px;
        border: 5px solid gray;
        margin: 0;
    }
</style>
</head>
<body>

    <div>Bu div öğesidir.</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 320px;

padding: 10px;

border: 5px solid gray;

margin: 0;

}

</style>

</head>

<body>

<div>Bu div öğesidir.</div>

</body>

</html>

<div> öğesinin yükseklik ve genişliğini kutu modeline göre hesaplayalım;

320px (genişlik)
+ 20px (sol + sağ padding)
+ 10px (sol + sağ kenarlık)
+ 0px (sol + sağ margin)
= 350px

Kutu modeline göre, bir öğenin toplam genişliği aşağıdaki formülü kullanarak hesaplanabilir:


Toplam öğe genişliği = genişlik + sol dolgu sağı dolgu + sol kenarlık + sağ kenarlık + sol kenar boşluğu + sağ kenar boşluğu

Toplam öğe genişliği = genişlik + sol dolgu sağı dolgu + sol kenarlık + sağ kenarlık + sol kenar boşluğu + sağ kenar boşluğu

Kutu modeline göre, bir öğenin toplam yüksekliği aşağıdaki formülü kullanarak hesaplanabilir:


Toplam eleman yüksekliği = yükseklik + üst dolgu + alt dolgu + üst kenarlık + alt kenarlık + üst kenar boşluğu + alt kenar boşluğu

Toplam eleman yüksekliği = yükseklik + üst dolgu + alt dolgu + üst kenarlık + alt kenarlık + üst kenar boşluğu + alt kenar boşluğu

İlgili

Yorum

CSS Kutu Boyutlandırma – Box Sizing Özelliği – Yazılım Bilişim Programlama dedi ki:

Kasım 26, 2017, 12:03 am

[…] iyi bir giriş yapmak için CSS Kutu Modeli başlıklı yazımızı öncelikli olarak okumanızı öneriyoruz. Biraz […]

Cevapla
CSS Dersleri – Yazılım Bilişim Programlama dedi ki:

Kasım 24, 2017, 9:47 am

[…] CSS Kutu Modeli – Box Model […]

Cevapla
CSS Display Kullanımı – Yazılım Bilişim Programlama dedi ki:

Kasım 19, 2017, 1:25 pm

[…] tarayıcıları her HTML öğesini bir kutu gibi ele almaktadır. Ancak bu tarayıcılar öğelerin anlam doğası gereği, tüm kutuları […]

Cevapla

Kutunun Genişliği ve Yüksekliği

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum

Yorum Yap X