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

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

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

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

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