Padding trong css là gì là một trong những keyword được search nhiều nhất trên Google về chủ đề padding trong css là gì. Trong bài viết này, cachthietkeweb.vn sẽ viết bài viết Padding trong css là gì? Tại sao chúng ta cần hiểu về padding trong css?
Padding trong css là gì? Tại sao chúng ta cần hiểu về padding trong css?
định nghĩa và sử dụng
thuộc tính padding thêm vào khoảng không cho yếu tố.
Cấu trúc
tag
padding: giá trị;
Với giá trị như sau:
| thuộc tính | trị giá | ví dụ | mô tả |
|---|---|---|---|
| padding | đơn vị inherit |
padding: 5px 10px 3px 20px; | Đây là mẹo viết ngắn gọn các tính chất bên dưới, tổ chức đủ sức là px, em, %, … |
| padding-top | đơn vị inherit |
padding-top: 5px; | thích hợp khoảng không bên trên cho thành phần, đơn vị đủ nội lực là px, em, %, … |
| padding-right | đơn vị inherit |
padding-right: 5px; | thêm vào khoảng không bên phải cho yếu tố, tổ chức có thể là px, em, %, … |
| padding-bottom | tổ chức inherit |
padding-bottom: 5px; | phù hợp khoảng k bên dưới cho nguyên nhân, đơn vị đủ sức là px, em, phần trăm, … |
| padding-left | tổ chức inherit |
padding-left: 5px; | thích hợp khoảng k bên trái cho thành phần, đơn vị có thể là px, em, phần trăm, … |
mẹo sử dụng thuộc tính padding:
| tính chất | nguyên nhân | Thể hiện | ví dụ | giới thiệu |
|---|---|---|---|---|
| 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 yếu tố | top (right left) bottom | padding: 5px 10px 15px; | padding-top: 5px; padding-right: 10px padding-left: 10px padding-bottom: 15px |
|
| 2 yếu tố | (top bottom) (right left) | padding: 5px 10px; | padding-top: 5px; padding-bottom: 5px padding-right: 10px padding-left: 10px |
|
| 1 nguyên nhân | (top right bottom left) | padding: 10px; | padding-top: 10px; padding-right: 10px padding-bottom: 10px padding-left: 10px |
ví dụ
xem thêm ví dụ
HTML viết:
HỌC web CHUẨN
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ó tính chất padding:
HỌC website chuẩn
Thêm tính chất padding vào CSS:
div border: 1px solid red; div p background: #66CC00; padding: 20px 0 0 0;
loại padding ở trên tương đương với các trị giá sau:
padding-top: 20px;
padding-right: 0
padding-bottom: 0
padding-left: 0
Hiển thị trình duyệt khi vừa mới thêm max-height vào CSS:
HỌC web phù hợp
Trình duyệt hỗ trợ
tính chất padding được hỗ trợ trong đa số các trình duyệt.
giá trị “inherit” k hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
link liên quan
- HTML/XHTML
- CSS
- background
- border
nguồn: hocwebchuan.com
