CSS Padding

14/05/2019

Bài sau » « Bài trước

Thuộc tính CSS Padding dùng để tạo khoảng cách từ nội dung đến đường viền của phần tử HTML. Làm gia tăng width, height của phần tử HTML.

Thuộc tính padding có 4 giá trị tương ứng theo thứ tự top, right, bottom và left:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Thuộc tính padding có thể có các giá trị sau:

  • length - Giá trị padding cụ thể kèm đơn vị px, pt, em, rem,...
  • % - Chỉ định padding theo % width của phần tử chứa nó.
  • inherit - Chỉ định padding được thừa kế theo phần tử cha.

Chú ý: Giá trị âm không được chấp nhận.

p{ padding-top: 50px; padding-right: 30px; padding-bottom: 20px; padding-left: 20px; }

Kết quả hiển thị :

Ví dụ về padding của thẻ p theo top là 50px, right là 30px, bottom là 20px và left là 20px

Padding - Cú pháp rút gọn

Theo ví dụ phía trên, thay vì ta viết các thuộc tính padding riêng lẻ cho từng lề (top, right, bottom, left) thì ta có thể viết ngắn gọn lại trong 1 dòng code với thuộc tính padding. Cú pháp :

padding: padding-top padding-right padding-bottom padding-left;

- Nếu thuộc tính padding có 4 giá trị:

padding: 50px 30px 30px 20px;

Có nghĩa là :
padding-top là 50px
padding-right là 30px
padding-bottom là 30px
padding-left là 20px

- Nếu thuộc tính padding có 3 giá trị:

padding: 50px 30px 30px;

Có nghĩa là :
padding-top là 50px
padding-right và padding-left là 30px
padding-bottom là 30px

- Nếu thuộc tính padding có 2 giá trị:

padding: 50px 30px;

Có nghĩa là :
padding-top và padding-bottom là 50px
padding-right và padding-left là 30px

- Nếu thuộc tính padding có 1 giá trị:

padding: 50px;

Có nghĩa là :
Tất cả các lề đều 50px

Padding và Width của phần tử HTML

Thuộc tính CSS width chỉ định width của nội dung phần tử HTML. Phần nội dung là phần nằm trong padding, border và margin của phần tử HTML.

Vì vậy, khi một phần tử được chỉ định width cụ thể. Ta thêm padding cho phần tử đó thì width của phần tử sẽ tăng thêm. 

Cùng phân tích ví dụ sau đây: Phần tử div có width là 300px, nhưng có thêm padding left 25px, padding right 25px thì sau đó div này có width là 350px (300px + 25px left + 25px right):

div{ width: 300px; padding: 25px; background: #ccc; }

Width 300px và tăng thêm 50px (25px left, 25px right)

Để khắc phục vấn đề trên ta có 2 cách như sau:

- Cách 1: Tự tính toán padding và trừ nó vào width :

div{ width: 250px; padding: 25px; background: #ccc; }

Cách 1: Tự tính toán padding và trừ nó vào width

- Cách 2: sử dụng thuộc tính box-sizing

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

Cách 2: sử dụng thuộc tính box-sizing

Bài hướng dẫn về CSS Padding đã kết thúc rồi. Kiến thức về padding khá quan trọng nên nếu các bạn chưa hiểu thì nên xem lại nhiều lần và thực hành nó kỹ hơn.

Bài sau » « Bài trước
Back to top