Der Einfluss von Rändern auf die Erweiterung von Elementen in CSS

Der Rand erweitert ebenfalls den Block. Schauen wir uns ein ähnliches Beispiel an. Setzen wir für den zweiten Block einen Rand von 10px:

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;  /* Rand setzen */
}

Результат: