CSS box-sizing Özelliği Nedir ve Nasıl Kullanılır?

CSS box-sizing özelliği bize kutunun genişliğinin border ve padding değerlerinin içerip içermemesi gerektiğini tanımlama imkanı sağlıyor .

İki adet değeri vardır. Bunlar;

content-box: Başlangıç değeridir. Genişlik veya yükseklik değeri içerik alanını içerir. border ve padding değerlerini içermez.

border-box: Genişlik veya yükseklik değeri padding ve border değerlerini de içerir.

Şimdi bir örnek ile gösterelim.

.kutu
{
	display: block;
	border: 25px solid red;
	padding: 25px;
	width: 250px;
	height: 250px;
	background: blue;
}

Kutu genişliği: 25px + 25px + 250px + 25px = 325px olacaktır.

.kutu
{
  display: block;
  border: 25px solid red;
  padding: 25px;
  width :250px;
  height: 250px;
  background: blue;
  box-sizing: border-box;
}

Kutunun genişlik değeri 250px, içerik alanı genişlik değeri ise 175px olacaktır.

Her iki değerin kullanılabileceği yerler vardır. border-box tanımının esnek yapılı alanlarda bize avantaj sağlar. Esnek yapılı bir içerikte genişlik tanımlarımızı yüzde olarak verdiğimizde ve padding ile border tanımı yaptığımızda kutularımızın genişliği toplamı %100 olmasına rağmen padding ve border değerleri nedeni ile kapsayıcı eleman içine sığmayacaktır. Burada genişlik değerini padding ve border değerlerini çıkarıp hesaplama imkanımızda yoktur. Bu gibi durumlarda box-border tanımı ile sorunumuza kolayca çözüm üretebiliriz.

CSS box-sizing özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

Son Eklenen Yazılar