Behold størrelsen på objekter

Utfordringen kan noen ganger være å beregne størrelsen på objekter. Om jeg lager et objekt med padding på 10px så vil denne i utgangspunktet være height + padding + border og width + padding + border.

.ramme {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid silver;
  box-sizing: border-box;
}

Her har jeg lagt til box-sizing: border-box som gjør at objektet beholder størrelsen som er angitt i høyde og bredde. Padding og border blir beregnet, men lagt til innsiden av objektet.