чӣ гуна хосияти box-sizing ба андозаи унсур таъсир мерасонад?

Масъулияти CSS box-sizing муайян мекунад, ки чӣ тавр андозагирии элемент ҳисоб карда мешавад — оё дохилӣ (padding) ва ҳошияҳо (border) дар ҳисобот дохил мешаванд ё не.

• Арзиши content-box (тавре ки пешфарз аст): дарозӣ ва баландии элемент танҳо мазмуни онро муайян мекунад. Дохилӣ (padding) ва ҳошияҳо ба ин андозагирҳо илова мешаванд, ки андозаи умумии элементро зиёд мекунанд.

• Арзиши border-box: дарозӣ ва баландӣ мазмун, дохилӣ (padding) ва ҳошияҳоро дар бар мегирад. Ин маъно дорад, ки агар шумо дарозиро 100px таъин кунед, мазмун бо назардошти padding ва border кам карда мешавад, то ки андозаи умумӣ 100px боқӣ монад.

Масалан:

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

Дар ин ҳолат, элемент .box андозаи умумии 200px хоҳад дошт, ки дохилӣ ва ҳошияро дар бар мегирад. Агар content-box мебуд, андозаи умумӣ 200 + 210 + 25 = 230px мешуд.

Истифодаи border-box одатан осонтар мекунад, зеро андозагирии элементҳо "шикаста" намешавад ба сабаби padding ва border.