რა განსხვავებაა box-sizing: content-box და border-box-ს შორის?

box-sizing: content-box და box-sizing: border-box შორის განსხვავება იმაშია, თუ როგორ ითვლის ბრაუზერი ელემენტის საერთო ზომებს:

• content-box (ძირითადი მნიშვნელობა): სიგანე და სიმაღლე განსაზღვრავს მხოლოდ შიგთავსს. ამ ზომებს ემატება შიდა შუალედი (padding) და საზღვარი (border), რაც ზრდის საბოლოო ზომას.

• border-box: სიგანე და სიმაღლე მოიცავს შიგთავსს, padding-ს და border-ს. სხვა სიტყვებით რომ ვთქვათ, padding და border "შესწორებულია" განსაზღვრულ ზომებში.

მაგალითი:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* ან border-box */
}

• content-box-ით საერთო სიგანე იქნება: 200 + 102 + 52 = 230px.
• border-box-ით საერთო სიგანე რჩება 200px და შიგთავსი მცირდება padding და border-ის შესატყვისად.

border-box-ის გამოყენება ხშირად უფრო მოსახერხებელია განლაგებისთვის, რადგან ელემენტების ზომები "გაფართოვებული" არ არის padding და border-ის გამო.