CSS box-sizing özelliği

Tanım ve kullanım

box-sizing özelliği, belirli bir bölgeyi belirli bir element için belirli bir şekilde tanımlamanıza olanak tanır.

Örneğin, iki kenarlı kutuyu yan yana yerleştirmeniz gerekiyorsa, box-sizing'ı "border-box" olarak ayarlayabilirsiniz. Bu, tarayıcının belirtilen genişlik ve yüksekliğe sahip kutular sunmasını ve kenar çizgileri ve iç dolguları kutunun içine yerleştirmesini sağlar.

Ayrıca bkz:

CSS3 eğitim:CSS3 kullanıcı arayüzü

HTML DOM referans el kitabı:boxSizing özelliği

Örnek

İki yan yana kenarlı kutu tanımlar:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Kendi kendine deneyin

Sayfa altında daha fazla örnek var.

CSS dilbilgisi

box-sizing: content-box|border-box|inherit;

Özellik değeri

Değer Açıklama
content-box

Bu, CSS2.1 tarafından belirlenen genişlik ve yükseklik davranışıdır.

Genişlik ve yükseklik, elemanın içerik kutusuna uygulanır.

Genişlik ve yükseklik dışında elemanın iç dolgu ve kenar çizgilerini çizer.
border-box

Elemana belirlenen genişlik ve yükseklik, elemanın kenar çerçeve kutusunu belirler.

Diyelim ki, elemana belirtilen herhangi bir iç dolgu ve kenar çizgisi, belirlenen genişlik ve yükseklik içinde çizilir.

İç dolgu ve kenar çizgilerinden ayrılmış olarak belirlenen genişlik ve yükseklik, iç genişlik ve yüksekliği elde etmek için kullanılır.
inherit Box-sizing özelliğinin değerini parent element'ten devralması gerektiğini belirtir.

Teknik ayrıntılar

Öntanımlı değer: content-box
Devralabilirlik: hayır
Sürüm: CSS3
JavaScript dilbilgisi: object.style.boxSizing="border-box"

Tarayıcı desteği

Tablo, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Bu, -webkit- veya -moz- ile başlayan sayıların, önekli ilk sürümü kullanıldığını gösterir.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5