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

Chúng ta đã tìm hiểu thuộc tính margin, tạo khoảng cách ra bên ngoài từ đường viền. Cũng có một thuộc tính rất giống là padding, tạo khoảng cách vào bên trong từ đường viền.

Bây giờ hãy cùng xem các ví dụ về cách thuộc tính này hoạt động. Đầu tiên, tôi đưa ra một khối không có vùng đệm (văn bản của nó dính sát vào đường viền):

html<div id="elem">
  some long text
</div>

css#elem {
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат:

Và bây giờ hãy đặt padding là 30px cho tất cả các phía:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат: