ელემენტების გაფართოება CSS-ში JavaScript-ისთვის

CSS თვისებების width-ის და height-ის მინიჭება არ იძლევა იმის გარანტიას, რომ ელემენტი მიიღებს მითითებულ ზომას. მოდით შევხედოთ მაგალითებს.

მაგალითი

ამჟამად ელემენტის ზომები ემთხვევა მითითებულებს:

<div id="elem">
	ტექსტი
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

მაგალითი

ახლა კი მივანიჭოთ ელემენტს თვისება padding. შედეგად, ელემენტის რეალური სიგანე გახდება მეტი და გაფართოვდება შიდა ველის მითითებული მნიშვნელობით:

<div id="elem">
	ტექსტი
</div>

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

მაგალითი

ჩარჩოს არსებობაც ფართოვებს ელემენტს:

<div id="elem">
	ტექსტი
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

მაგალითი

თვისება box-sizing საშუალებას აძლევს შეცვალოს ზემოთ აღწერილი ქცევა. შესაძლებელია ისე მოვიქცეთ, რომ არც შიდა ველი, არც ჩარჩო გაფართოებდეს ელემენტს. ამისთვის ამ თვისებას საჭიროა მივანიჭოთ მნიშვნელობა border-box:

<div id="elem">
	ტექსტი
</div>

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

აღწერილის მნიშვნელობა

JavaScript-ის თვალსაზრისით, აღწერილი სიტუაცია არც ისე მოსახერხებელია. ხომ ისე გამოდის, რომ width თვისების მნიშვნელობის წაკითხვის შემდეგ სრულიად ვერ ვართ დარწმუნებულები, რომ ელემენტი ზუსტად ამ სიგანის იქნება.