Ảnh hưởng của viền đến việc mở rộng phần tử trong CSS

Viền cũng làm mở rộng khối. Hãy xem xét một ví dụ tương tự. Hãy đặt viền 10px cho khối thứ hai:

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;  /* đặt viền */
}

Результат: