box-sizing Özelliği

box-sizing özelliği, bir öğenin boyutlarının hesaplanma şeklini değiştirmenize olanak tanır.

Varsayılan olarak, padding eklemek öğeyi genişletir: eğer genişliği width 100px ve padding-left değerini 20px olarak ayarladıysak, öğenin gerçek genişliği 120px olacaktır.

Ve eğer ayrıca border-left değerini 10px olarak ayarlarsak, öğenin gerçek genişliği 130px olacaktır. Yani, padding ve border bloğu genişletir (hem genişlik hem de yükseklik olarak). Bu davranış box-sizing kullanılarak değiştirilebilir.

Sözdizimi

seçici {
	box-sizing: content-box | border-box;
}

Değerler

Değer	Açıklama
`content-box`	Hem `padding` hem de `border` bloğu genişletir.
`border-box`	Ne `padding` ne de `border` bloğu genişletir.

Varsayılan değer: content-box.

Örnek . Standart Davranış

Şu anda her iki bloğun da aynı yüksekliğe ve genişliğe sahip olmasına rağmen, ikinci blokta padding ayarlanmış durumda, ilkinde ise yok. Boyutlarının nasıl farklılaştığına bakın:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	margin-bottom: 10px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Örnek . Standart Davranış

Şu anda her iki bloğun da aynı yüksekliğe ve genişliğe sahip olmasına rağmen, ikinci blokta 10px kalınlığında bir kenarlık ayarlanmış durumda, ilkinde ise yok. Boyutlarının nasıl farklılaştığına bakın:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Örnek . Standart Davranış

Şu anda ikinci blokta hem padding hem de 10px kalınlığında kenarlık var:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	padding: 50px;
	border: 20px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Örnek . border-box Değeri

İkinci öğeye box-sizing özelliği için border-box değerini ekleyelim. Artık hem birinci hem de ikinci öğenin boyutları aynı olacak:

<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

#elem1 {
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}
#elem2 {
	box-sizing: border-box;
	padding: 50px;
	border: 10px solid black;
	width: 300px;
	height: 100px;
	background: #f1f1f1;
}

Ayrıca Bakınız

öğeyi genişletmeyen bir kenarlık yapan outline özelliği