Làm việc với padding (khoảng đệm) trong CSS

Giả sử chúng ta đặt chiều rộng cho một phần tử là 100px. Trong CSS, điều này hoàn toàn không có nghĩa là phần tử đó thực sự sẽ có chiều rộng 100px. Vấn đề là việc thêm padding sẽ mở rộng phần tử và nó trở nên lớn hơn so với giá trị được chỉ định trong thuộc tính width.

Hãy xem xét một ví dụ. Chúng ta sẽ tạo hai khối, đặt chiều rộng cho chúng là 100 pixel. Đồng thời, chúng ta đặt padding cho khối thứ hai, còn khối đầu tiên thì không. Kết quả là khối thứ hai sẽ lớn hơn với kích thước bằng khoảng đệm:

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

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

#elem2 {
  padding: 25px; /* thiết lập khoảng đệm */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: