HTML/CSS

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

Viết bởi Tiến Đức
Phần 9 của 9 trong series [W3schools Tiếng Việt] - CSS

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

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:

Thứ tự lần lượt tương ứng với các giá trị: Padding: top right botton left;
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
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
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):

Để 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ụ:

Xem thêm bài trong series<< [W3schools Tiếng Việt] – CSS Margins | Canh lề cho phần tử
Sending
User Review
0 (0 votes)

Về tác giả

Tiến Đức

Gửi phản hồi