CSS-те box-sizing қасиетінің қандай мәндері бар?

• content-box (әдепкі мән) - элементтің ені мен биіктігі тек мазмұнды қамтиды. Жолдар (padding) және шекаралар (border) берілген өлшемдерге қосылады.
• border-box - элементтің ені мен биіктігі мазмұнды, жолдар мен шекараларды қамтиды. Берілген өлшемдер барлық үш компонентті қамтиды.
• padding-box (тәжірибелік мән, кеңінен қолдау көрсетілмейді) - ені мен биіктігі мазмұнды және жолдарды қамтиды. Шекаралар берілген өлшемдерге қосылады.

content-box және border-box көрсетілімінің мысалы:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box; /* Шынайы ені 100 + 2*20 + 2*5 = 150px болады */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box; /* Шынайы ені 100px болады */
}