box-sizing мүнөздөмөсү элементтин өлчөмүнө кандай таасир этет?

CSS box-sizing мүлкү элементтин өлчөмдөрүн кандай эсептөө керектигин аныктайт — ички аралыктар (padding) жана чектөөлөр (border) киргизилеби же жокпу.

• Баа content-box (өзүнчө): элементтин кеңдиги жана бийиктиги тек мазмунду аныктайт. Ички аралыктар жана чектөөлөр бул өлчөмдөргө кошулат, натыйжада жалпы өлчөм көбөйөт.

• Баа border-box: кеңдик жана бийиктик мазмунду, ички аралыктарды жана чектөөлөрдү камтыйт. Бул деген, эгер кеңдик 100px деп коюлса, мазмун padding жана border эске алынып кыскартылат, ошондо жалпы өлчөм 100px калат.

Мисал:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

Бул учурда, .box элементинин жалпы кеңдиги 200px болот, padding жана border киргизилген. Эгер content-box болсо, жалпы кеңдик 200 + 210 + 25 = 230px болот.

border-box колдонуу көбүнчө дизайнды жөнөкөйлөтөт, анткени элементтердин өлчөмдөрү padding жана border себептүү "жарыла" албайт.