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 себептүү "өскөн" эмес.