CSS Çerçeve Modeli Özeti

CSS Kutu Modeli (Box Model), element kutularının element içerikleriniiç kenar boşluğu,çerçeve ve Dış kenar boşluğu tarzı.

CSS Çerçeve Modeli Özeti

CSS Çerçeve Modeli

Element kutusunun en iç kısmı gerçek içeriktir, içerik etrafında doğrudan iç kenar boşluğu yer alır. İç kenar boşluğu, elementin arka planını sunar. İç kenar boşluğunun kenarları çerçeveyi oluşturur. Çerçeve dışında dış kenar boşluğu vardır, dış kenar boşluğu varsayılan olarak şeffettir, bu yüzden sonraki herhangi bir elementi gölgelemeyebilir.

İpucu:Arka plan, içerik ve iç kenar boşluğu, çerçeve tarafından oluşturulan bölgeye uygulanır.

İç kenar boşluğu, çerçeve ve dış kenar boşluğu seçeneklerdir, varsayılan değeri sıfırdır. Ancak, birçok element kullanıcı aracı tarayıcı tarzı tarafından dış kenar boşluğu ve iç kenar boşluğu 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 kullanılarak tüm elementlere de uygulanabilir:

* {
  margin: 0;
  padding: 0;
}

CSS'te, width ve height içerik alanının genişliğini ve yüksekliğini belirtir. İç kenar boşluğu, çerçeve ve dış kenar boşluğunun eklenmesi içerik alanının boyutunu etkilemez, ancak element kutusunun toplam boyutunu artırır.

Dış kenar boşluğu her kenarda 10 pixel, iç kenar boşluğu 5 pixel olan bir kutu varsayalım. 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örebilirsiniz:

CSS Çerçeve Modeli Örneği 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

İpucu:İç kenar boşluğu, çerçeve ve dış kenar boşluğu bir elementin tüm kenarlarına da, yalnızca belirli bir kenara da uygulanabilir.

İpucu:Dış kenar boşluğu negatif değer olabilir ve birçok durumda negatif değerli dış kenar boşluğu kullanılmalıdır.

Tarayıcı Uyumluluğu

Sayfa için uygun DTD ayarlandıktan sonra, çoğu tarayıcı içerikyi yukarıdaki görselde gösterildiği gibi sunar. Ancak IE 5 ve 6'nın sunumu yanlış. W3C'nin normlarına göre, element içeriği alanı width özelliği tarafından belirlenir, içerik etrafındaki padding ve border değerleri ayrıca hesaplanır. Ne yazık ki, IE5.X ve 6'nın çılgın modunda kendi standart dışı modelini kullanıyorlar. Bu tarayıcıların width özelliği içerik genişliği değil, içerik, iç kenar boşluğu ve çerçeve genişliğinin toplamıdır.

Bu sorunu çözmek için yollar var. Ancak, şu anda en iyi çözüm bu sorunu kaçınmaktır. Yani, elemente belirli bir genişliğe sahip iç kenar boşluğu eklemek yerine, iç kenar boşluğu veya dış kenar boşluğunu elementin ebeveyn ve çocuk elementlerine eklemeyi deneyin.

Terim Çevirisi

  • element: element.
  • padding: iç kenar boşluğu, bazı kaynaklarda doldurma olarak da çevrilebilir.
  • border: kenar çizgisi.
  • margin: dış kenar boşluğu, bazı kaynaklarda boşluk veya boşluk kenarı olarak da çevrilebilir.

Codew3c'te, padding ve margin'ı birleştirerek iç kenar boşluğu ve dış kenar boşluğu olarak adlandırıyoruz. Kenar çizgisi içindeki boşluk iç kenar boşluğudur, kenar çizgisi dışındaki boşluk dış kenar boşluğudur, hatırlamak kolay mı:）