CSS Kutu Modeli

CSS Kutu Modeli

Tüm HTML öğeleri kutu olarak görülebilir. CSS'te, tasarım ve yerleşim hakkında konuşulduğunda, ' kutu modeli ' veya ' çerçeve modeli ' terimleri kullanılır.

CSS çerçeve modeli, her HTML elementini saran bir kutudur. İçerir: dış boşluk, çerçeve, iç boşluk ve gerçek içerik. Aşağıdaki resimde çerçeve modeli gösterilir:

CSS Kutu Modeli

Farklı bölümlere ilişkin açıklamalar:

  • İçerik - Kutunun içeriği, metin ve görsellerin görüldüğü yer.
  • İç boşluk - İçeriği çevreleyen alanı temizler. İç boşluk şeffaftır.
  • Çerçeve - İç boşluk ve içeriği çevreleyen çerçeve.
  • Dış boşluk - Sınırın dışındaki alanı temizler. Dış boşluk şeffaftır.

Çerçeve modeli, element etrafına çerçeve eklememizi ve elementler arasındaki boşluğu tanımlamamızı sağlar.

Element kutusunun en iç kısmı gerçek içeriktir, içeriği doğrudan saran iç boşluklardır. İç boşluk, elementin arka planını sunar. İç boşluğun kenarları çerçevedir. Çerçeve dışında dış boşluk bulunur, dış boşluk varsayılan olarak şeffaftır, bu yüzden arkasındaki herhangi bir elementi gölgelemeyebilir.

İpucu：Arka plan, içerik ve iç boşluk, çerçeve tarafından oluşturulan alana uygulanır.

İç boşluk, çerçeve ve dış boşluk seçmeli özelliklerdir, varsayılan değeri sıfırdır. Ancak, birçok element kullanıcı aracı tarzı tablosu tarafından dış boşluk ve iç boşluk ayarlanır. Bu tarayıcı stillerini geçmek için elementin margin ve padding'ını sıfıra ayarlayabilirsiniz. Bu ayrı ayrı yapılabilir, aynı zamanda genel seçici ile tüm elementlere uygulanabilir:

* {
  margin: 0;
  padding: 0;
}

CSS'te, width ve height içerik alanının genişliğini ve yüksekliğini ifade eder. İç boşluk, çerçeve ve dış boşluk eklenmezse içerik alanının boyutunu etkilemez, ancak element kutusunun toplam boyutunu artırır.

Kutunun her kenarında 10 pixel dış boşluk ve 5 pixel iç boşluk olduğu varsayılıyor. Bu element kutusunun 100 pixel olmasını istiyorsanız, içeriğin genişliğini 70 pixel olarak ayarlamalısınız. Aşağıdaki resimde görülebilir:

CSS Kutu Modeli Örneği 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

İpucu：İç boşluk, çerçeve ve dış boşluk, bir elementin tüm kenarlarına veya单独 bir kenara uygulanabilir.

İpucu：Dış boşluk negatif değer alabilir ve birçok durumda negatif dış boşluk kullanılır.

Örnek

Çerçeve modelini gösterme：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Kişisel olarak deneyin

Elementin genişliği ve yüksekliği

Tüm tarayıcılar arasında doğru bir şekilde elementin genişliğini ve yüksekliğini ayarlamak için, çerçeve modelinin nasıl çalıştığını bilmek gereklidir.

Önemli Uyarı：CSS ile bir elementin width ve height özelliklerini ayarlamak için yalnızca içerik alanının genişliğini ve yüksekliğini ayarlamak yeterlidir. Elementin tam boyutunu hesaplamak için iç boşluk, çerçeve ve dış boşlukları da eklemelisiniz.

Örnek

<div> elementin toplam genişliği 350px olacaktır：

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

Kişisel olarak deneyin

Aşağıdaki gibi hesaplanır:

320px(çap)
+ 20px (sol+sağ iç kenar boşluğu)
+ 10px (sol+sağ kenar)
+ 0px (sol+sağ dış kenar boşluğu)
= 350px

Elementin toplam genişliği şu şekilde hesaplanmalıdır:

Elementin toplam genişliği = Genişlik + Sol İç Kenar Boşluğu + Sağ İç Kenar Boşluğu + Sol Kenar + Sağ Kenar + Sol Dış Kenar Boşluğu + Sağ Dış Kenar Boşluğu

Elementin toplam yüksekliği şu şekilde hesaplanmalıdır:

Elementin Toplam Yüksekliği = Yükseklik + Üst İç Kenar Boşluğu + Alt İç Kenar Boşluğu + Üst Kenar + Alt Kenar + Üst Dış Kenar Boşluğu + Alt Dış Kenar Boşluğu