Vetia box-sizing

Vetia box-sizing lejon ndryshimin e mënyrës së llogaritjes së dimensioneve të elementit.

Si parazgjedhje, shtimi i padding zgjeron elementin: nëse kemi caktuar gjerësinë width 100px dhe padding-left në 20px, atëherë gjerësia reale e elementit do të jetë 120px.

Dhe nëse caktojmë edhe border-left në 10px, atëherë gjerësia reale e elementit do të bëhet 130px. Domethënë, padding dhe border zgjasin bllokun (si në gjerësi, ashtu edhe në lartësi). Kjo sjellje mund të ndryshohet me ndihmën e box-sizing.

Sintaksa

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

Vlerat

Vlera	Përshkrimi
`content-box`	Edhe `padding`, edhe `border` zgjerojnë bllokun.
`border-box`	As `padding`, as `border` nuk e zgjerojnë bllokun.

Vlera e parazgjedhur: content-box.

Shembull . Sjellja standarde

Tani të dy blloqet kanë të njëjtën lartësi dhe gjerësi, megjithatë bllokut të dytë i është caktuar padding ndërsa të parit - jo. Shikoni se si ndryshojnë dimensionet e tyre:

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

Shembull . Sjellja standarde

Tani të dy blloqet kanë të njëjtën lartësi dhe gjerësi, megjithatë bllokut të dytë i është caktuar kufiri në 10px, ndërsa të parit - jo. Shikoni, si ndryshojnë dimensionet e tyre:

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

Shembull . Sjellja standarde

Tani blloku i dytë ka edhe padding, edhe kufir në 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;
}

Shembull . Vlera border-box

Le t'i shtojmë elementit të dytë vlerën border-box për vetinë box-sizing. Tani dimensionet e elementit të parë dhe të dytë do të bëhen të njëjta:

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

Shihni gjithashtu

vetia outline,
e cila bën një kufir që nuk e zgjon elementin