Box-sizing xassəsi

box-sizing xassəsi elementin ölçülərinin hesablanma üsulunu dəyişməyə imkan verir.

Defolt olaraq padding əlavə etmək elementi genişləndirir: əgər biz eni width 100px və padding-left 20px təyin etsək, onda elementin həqiqi eni 120px olacaq.

Əgər biz həm də border-left 10px təyin etsək, onda elementin həqiqi eni 130px olacaq. Yəni padding və border bloku genişləndirir (həm enə, həm də hündürlüyə). Bu davranışı box-sizing vasitəsilə dəyişmək olar.

Sintaksis

selektor {
	box-sizing: content-box | border-box;
}

Dəyərlər

Dəyər	Təsvir
`content-box`	Həm `padding`, həm də `border` bloku genişləndirir.
`border-box`	Nə `padding`, nə də `border` bloku genişləndirir.

Defolt dəyər: content-box.

Nümunə . Standart davranış

Hal-hazırda hər iki blok eyni hündürlük və enə malikdir, lakin ikinci blokda padding təyin edilib, birincidə isə yoxdur. Onların ölçülərinin nə qədər fərqləndiyinə baxı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;
}

Nümunə . Standart davranış

Hal-hazırda hər iki blok eyni hündürlük və enə malikdir, lakin ikinci blokda 10px sərhəd təyin edilib, birincidə isə yoxdur. Onların ölçülərinin nə qədər fərqləndiyinə baxı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;
}

Nümunə . Standart davranış

Hal-hazırda ikinci blokda həm padding, həm də 10px sərhəd 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;
}

Nümunə . Border-box dəyəri

Ikinci elementə box-sizing xassəsi üçün border-box dəyərini əlavə edək. İndi həm birinci, həm də ikinci elementin ölçüləri eyni olacaq:

<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;
}

Həmçinin bax

outline xassəsi,
elementi genişləndirməyən sərhəd yaradır