თვისება 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,
რომელიც ქმნის საზღვარს, რომელიც არ აფართოებს ელემენტს