De invloed van rand op het uitbreiden van elementen in CSS

De rand breidt het blok ook uit. Laten we kijken naar een vergelijkbaar voorbeeld. Laten we het tweede blok een rand van 10px geven:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  margin-bottom: 20px;
}

#elem2 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  border: 10px solid green;  /* stellen de rand in */
}

Результат: