Box-sizing հատկությունը

box-sizing հատկությունը թույլ է տալիս փոխել էլեմենտի չափերի հաշվարկման եղանակը:

Լռելյայն՝ padding-ի ավելացումը ընդլայնում է էլեմենտը. եթե մենք նշանակել ենք լայնություն width 100px և padding-left 20px, ապա էլեմենտի իրական լայնությունը կլինի 120px:

Իսկ եթե մենք նշանակենք նաև border-left 10px, ապա էլեմենտի իրական լայնությունը կդառնա 130px: Այսինքն՝ padding-ը և border-ը ընդլայնում են բլոկը (և լայնությամբ, և բարձրությամբ): Այս վարքագիծը կարելի է փոխել box-sizing-ի միջոցով:

Շարահյուսություն

ընտրիչ {
	box-sizing: content-box | border-box;
}

Արժեքներ

Արժեք	Նկարագրություն
`content-box`	Ե՛ւ `padding`-ը, և՛ `border`-ը ընդլայնում են բլոկը:
`border-box`	Ո՛չ `padding`-ը, և՛ ոչ `border`-ը չեն ընդլայնում բլոկը:

Լռելյայն արժեքը՝ content-box:

Օրինակ . Ստանդարտ վարքագիծ

Այժմ երկու բլոկներն էլ ունեն նույն բարձրությունը և լայնությունը, սակայն երկրորդ բլոկի համար նշանակված է padding, իսկ առաջինի համար՝ ոչ: Նայեք, թե ինչպես են տարբերվում նրանց չափերը:

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

Օրինակ . Ստանդարտ վարքագիծ

Այժմ երկու բլոկներն էլ ունեն նույն բարձրությունը և լայնությունը, սակայն երկրորդ բլոկի համար նշանակված է եզրագիծ 10px, իսկ առաջինի համար՝ ոչ: Նայեք, թե ինչպես են տարբերվում նրանց չափերը:

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

Օրինակ . Ստանդարտ վարքագիծ

Այժմ երկրորդ բլոկն ունի և՛ padding, և՛ եզրագիծ 10px:

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

Օրինակ . Border-box արժեք

Ավելացնենք երկրորդ էլեմենտին border-box արժեքը box-sizing հատկության համար: Այժմ և՛ առաջին, և՛ երկրորդ էլեմենտների չափերը կդառնան նույնը:

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

Տես նաև

outline հատկությունը,
որը ստեղծում է էլեմենտը չընդլայնող եզրագիծ