Khoảng Đệm (Padding) trong CSS

Thuộc Tính Padding

Thuộc tính padding được sử dụng để tạo khoảng đệm cho phần tử bằng cách tạo khoảng trống đệm tính từ nội dung của phần tử cho tới đường viền.

  p {      padding: 5px  10px 5px 10px;  }

Đoạn mã CSS ở trên tạo khoảng đệm trên, đệm phải, đệm dưới và đệm trái lần lượt là 5px, 10px, 5px và 10px. Cách tạo đệm như trên gộp giá trị khoảng đệm từ tất cả 4 phía của phần tử. Tuy nhiên chúng ta cũng có thể tạo khoảng đệm riêng lẻ cho từng phía.

Khoảng Đệm Riêng Lẻ

Chúng ta có thể sử dụng một trong bốn thuộc tính sau đây để tạo khoảng cho từng phía của phần tử:

• Thuộc tính padding-top: Dùng để tạo khoảng đệm trên cho phần tử.
• Thuộc tính padding-left: Dùng để tạo khoảng đệm trái cho phần tử.
• Thuộc tính padding-bottom: Dùng để tạo khoảng đệm dưới cho phần tử.
• Thuộc tính padding-right: Dùng để tạo khoảng đệm phải cho phần tử.

  p {      padding-top: 5px;      padding-right: 10px;      padding-bottom: 5px;      padding-left: 10px;  }