CSS3 box-sizing Özelliği

Örnekte iki kutu yanyana getiriliyor :

Örnek için tıkla

Tanım ve kullanım

CSS3 box-sizing özelliği browsera boyutlandırma (width ve height) özelliklerinin ne içerdiğini anlatmak için kullanılırlar.

Height ve width özelliklerinin varsayılan değerleri olan content-box ve border-box içermelidirler.

Örneğin ; iki kutuyu yan yana getirmek istiyorsunuz diyelim, bunu box-sizing özelliğine "border-box" atayarak başarabilirsiniz. Bu işlem height ve width ölçüleri belirlenen kutunun, tarayıcı tarafından render edilmesini sağlar.

Özellikler : 

• Default değeri content-box'tır.


• Miraslama (inherited) özelliği yoktur


• Animasyon özelliği yoktur


• JavaScript yazım şekli  : object.style.boxSizing="border-box"

Css yazım şekli : box-sizing: content-box|border-box|initial|inherit;

Değer (value) Özellikleri  :

• content-box : Varsayılan değerdir. Sadece Width ve height özellikleri (ve min/max özellikler) içeriğe dahildir. Border, padding yada margin dahil değildir.


• border-box : İçeriğe width ve height özellikleri (ve min/max özellikleri) dahildir, padding ve border özellikleri içermez ama margin özelliği içerir.


• initial : Varsayılan değerini atar.


• inherit : Üyesi olduğun elemanın özelliği atar.

Kaynak  : http://www.w3schools.com/cssref/css3_pr_box-sizing.asp