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 thuộc tính và giá trị như sau: Thuộc tính giá trị Mô tả padding đơn vị inherit Đâ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à […]
Đị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 thuộc tính và giá trị như sau:
| Thuộc tính | giá trị | Mô tả |
|---|---|---|
| padding | đơn vị inherit |
Đâ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 |
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 |
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 |
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 |
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 | Mô tả |
|---|---|---|---|
| padding | 4 thành phần | top right bottom left (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 (5px 10px 15px) |
padding-top: 5px; padding-right: 10px; padding-left: 10px; padding-bottom: 15px; |
|
| 2 thành phần | (top bottom) (right left) (5px 10px) |
padding-top: 5px; padding-bottom: 5px; padding-right: 10px; padding-left: 10px; |
|
| 1 thành phần | (top right bottom left) (10px) |
padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; |
Ví dụ
Html viết:
<html> <head></head> <body> <div> <p>HỌC HTML - CSS</p> </div> </body> </html>
CSS viết:
div {
border: 1px solid red;
}
div p {
background: #66CC00;
}
Hiển thị trình duyệt:
HỌC HTML – CSS
CSS viết:
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:
HỌC HTML – CSS
Trình duyệt hỗ trợ
- Internet Explorer
- Firefox
- Opera
- Google Chrome
- Safari
