Hủy bỏ mở rộng phần tử trong CSS

Thông thường, việc mở rộng được mô tả trong các bài học trước là có hại và bạn muốn loại bỏ nó. Để làm điều này, CSS có thuộc tính box-sizing. Nếu bạn đặt cho nó giá trị border-box, thì cả padding lẫn đường viền đều sẽ không mở rộng khối:

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;
  padding: 25px; /* thiết lập khoảng đệm */
  border: 10px solid green;  /* thiết lập đường viền */
  box-sizing: border-box;  /* hủy bỏ mở rộng */
}

Результат: