Box-sizing häsiýeti

box-sizing häsiýeti elementleriň ölçegleriniň hasaplanyş usulyny üýtgetmäge mümkinçilik berýär.

Adaty ýagdaýda padding goşmak elementleri giňeldýär: eger biz ini width 100px we padding-left 20px hökmünde kesgitlesek, elementiň hakyky ini 120px bolar.

Eger-de biz border-left 10px⁅/u ⁆ hökmünde hem kesgitlesek, elementiň hakyky ini 130px bolar. Ýagny padding we border⁅/c ⁆ bloklary giňeldýär (hem ini, hem beýikligi boýunça). Bu hereketi box-sizing ýardamy bilen üýtgedip bolýar.



Sintaksis

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


Görnüşleri

	
		Görnüşi
		Düşündiriş
	
	
		content-box
		
			padding hem, border hem bloklary giňeldýär.
		
	
	
		border-box
		padding hem, border hem bloklary giňeltmeýär.
	


	Adaty ýagdaýdaky görnüşi: content-box.


Mysal . Standart hereket

	Häzir iki blokyň hem deň beýikligi
	we ini bar, ýöne ikinji blokda padding
	kesgitlenen, birinjide ýok. Olaryň ölçegleriniň
	näçe tapawutlanýandygyna serediň:


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

	
		:
	
	
					
						
					
				

Mysal . Standart hereket

	Häzir iki blokyň hem deň beýikligi
	we ini bar, ýöne ikinji blokda 10px çäginde araçäk
	kesgitlenen, birinjide ýok. Olaryň ölçegleriniň
	näçe tapawutlanýandygyna serediň:


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

	
		:
	
	
					
						
					
				

Mysal . Standart hereket

	Häzir ikinji blokyň hem padding, hem araçäg
	10px⁅/u ⁆ çäginde bar:


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

	
		:
	
	
					
						
					
				

Mysal . Border-box görnüşi

	Ikinji element üçin box-sizing häsiýetine
	border-box görnüşini goşalyň. Indi
	birinjiniň we ikinjiniň ölçegleri deň bolar:


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

	
		:
	
	
					
						
					
				

Şeýle-de serediň

	
		
			outline häsiýeti, 

			elementi giňeltmeýän araçäk döredýär

Görnüşi	Düşündiriş
`content-box`	`padding` hem, `border` hem bloklary giňeldýär.
`border-box`	`padding` hem, `border` hem bloklary giňeltmeýär.