HTML/CSS

[W3schools Tiếng Việt] – CSS Padding

CSS Padding là gì?

Thuộc tính Padding được sử dụng để tạo không gian xung quanh nội dung của một phần tử, tạo vùng đệm giữa đường viềnnội dung của phần tử.

CSS có các thuộc tính để chỉ định phần đệm cho mỗi bên của một phần tử:

  • padding-top (vùng đệm phía trên)
  • padding-right (vùng đệm phía phải)
  • padding-bottom (vùng đệp phía dưới)
  • padding-left (vùng đệp phía trái)

Lưu ý: Các thuộc tính trên có thể được sử dụng bởi các giá trị sau:

  • auto – (trình duyệt tự động thiết lập giá trị)
  • length – có thể xác định theo đơn vị: px, em, %, hoặc inherit (kế thừa giá trị của phần tử chứa nó)
  • Các giá trị âm không được phép
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Cách viết rút gọn thuộc tính Padding

Thay vì viết theo cách ở ví dụ 1, bạn có thể viết lại theo cách rút gọn như sau:

div {
 padding: 50px 30px 50px 80px;
}
Thứ tự lần lượt tương ứng với các giá trị: Padding: top right botton left;
div {
 padding: value1 value2 value3;
}
Thứ tự lần lượt tương ứng với các giá trị:
  • padding-top có giá trị value1
  • padding-right & padding-left có giá trị value2
  • padding-bottom có giá trị value3
div {
 padding: value1 value2;
}
Thứ tự lần lượt tương ứng với các giá trị:
  • padding-top & padding-bottom có giá trị value1
  • padding-right & padding-left có giá trị value2
div {
 padding: value1;
}
Cả bốn vị trí có giá trị bằng nhau và bằng value1.

Padding và độ rộng của phần tử

Độ rộng của phần tử chính là phần mầu vàng “Content Area”, phần nằm trong margin, border và padding.

Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần đệm được thêm vào phần tử đó sẽ được thêm vào tổng chiều rộng của phần tử.

Trong ví dụ sau, phần tử <div> được cho chiều rộng 300px. Tuy nhiên, chiều rộng được hiển thị thực tế của phần tử <div> sẽ là 350px (300px + 25px của phần đệm bên trái + 25px của phần đệm bên phải):


div {
  width: 300px;
  padding: 25px;
}

Để giữ chiều rộng ở mức 300px, bạn có thể sử dụng thuộc tính box-sizing . Điều này làm cho phần tử duy trì chiều rộng của nó; nếu bạn tăng phần đệm padding, không gian nội dung khả dụng sẽ giảm. Đây là một ví dụ:


div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Về tác giả

Tiến Đức

Để lại một bình luận