Thuộc tính padding

Định nghĩa và sử dụng

Thuộc tính padding thêm vào khoảng không cho thành phần.

Cấu trúc

tag {
    padding: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
padding đơn vị
inherit
padding: 5px 10px 3px 20px; Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, ...
padding-top đơn vị
inherit
padding-top: 5px; Thêm vào khoảng không bên trên cho thành phần, đơn vị có thể là px, em, %, ...
padding-right đơn vị
inherit
padding-right: 5px; Thêm vào khoảng không bên phải cho thành phần, đơn vị có thể là px, em, %, ...
padding-bottom đơn vị
inherit
padding-bottom: 5px; Thêm vào khoảng không bên dưới cho thành phần, đơn vị có thể là px, em, %, ...
padding-left đơn vị
inherit
padding-left: 5px; Thêm vào khoảng không bên trái cho thành phần, đơn vị có thể là px, em, %, ...

Cách sử dụng thuộc tính padding:

Thuộc tính Thành phần Thể hiện Ví dụ Mô tả
padding 4 thành phần top right bottom left padding: 5px 10px 3px 20px; padding-top: 5px;
padding-right: 10px
padding-bottom: 3px
padding-left: 20px
3 thành phần top (right left) bottom padding: 5px 10px 15px; padding-top: 5px;
padding-right: 10px
padding-left: 10px
padding-bottom: 15px
2 thành phần (top bottom) (right left) padding: 5px 10px; padding-top: 5px;
padding-bottom: 5px
padding-right: 10px
padding-left: 10px
1 thành phần (top right bottom left) padding: 10px; padding-top: 10px;
padding-right: 10px
padding-bottom: 10px
padding-left: 10px

HTML viết:

<html>
<head></head>
<body>
<div>
<p>HỌC WEB CHUẨN</p>
</div>
</body>
</html>

Giả sử ban đầu CSS viết:

div {
    border: 1px solid red;
}

div p {
    background: #66CC00;
}

Hiển thị trình duyệt khi chưa có thuộc tính padding:

HỌC WEB CHUẨN

Thêm thuộc tính padding vào CSS:

div {
    border: 1px solid red;
}

div p {
    background: #66CC00;
    padding: 20px 0 0 0;
}

Dòng padding ở trên tương đương với các giá trị sau:
padding-top: 20px;
padding-right: 0
padding-bottom: 0
padding-left: 0

Hiển thị trình duyệt khi đã thêm max-height vào CSS:

HỌC WEB CHUẨN

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính padding được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype