фарқи байни 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.