Các thuộc tính CSS về Padding
Các thuộc tính CSS về padding
được sử dụng để tạo ra không gian xung quanh nội dung.
Các thuộc tính thiết lập kích
thước của vùng trắng giữa nội dung và đường viền.
Phần tử này có padding là
50px.
CSS Padding
Các thuộc tính CSS về padding
xác định vùng trắng giữa nội dung và đường viền.
Padding tạo một vùng trắng
bao quanh nội dung (nằm trong đường viền) của một phần tử.
Lưu ý: Padding bị ảnh hưởng bởi màu nền của phần tử!
Với CSS, bạn có thể điều khiển
toàn bộ padding. Có các thuộc tính CSS để thiết lập padding cho mỗi phía của một
phần tử (phía trên - top, bên phải - right, phía dưới - bottom và bên trái -
left).
Padding - Các phía độc lập
CSS có các thuộc tính để chỉ
định padding cho mỗi phía (trên, phải, dưới, trái) của một phần tử:
·
padding-top
·
padding-right
·
padding-bottom
·
padding-left
Tất cả các thuộc tính về padding có thể có giá trị như sau:
·
con số cụ thể - chỉ định giá trị của
padding theo px, pt, cm, v.v.
·
% - chỉ định padding theo % của
chiều rộng\cao của phần tử chứa
·
inherit - xác định rằng padding thừa kế từ các phần tử cha
Ví dụ sau thiết lập padding
cho tất cả bốn phía của phần tử <p> khác nhau:
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Thuộc tính rút gọn
Để mã ngắn gọn, chúng ta có
thể chỉ định tất cả thuộc tính về padding bằng một thuộc tính.
Thuộc tính padding là thuộc tính rút gọn cho các thuộc tính về padding sau đây:
·
padding-top
·
padding-right
·
padding-bottom
·
padding-left
p{
padding: 50px 30px 50px
80px;
}
Sau đây là cách hoạt động của
thuộc tính này:
Nếu thuộc tính padding có bốn giá trị:
padding: 25px 50px 75px 100px;
padding: 25px 50px 75px 100px;
- padding trên (top) là 25px
- padding phải (right) là 50px
- padding dưới (bottom) là 75px
- padding trái (left) là 100px
Nếu thuộc tính padding có ba giá trị:
padding: 25px 50px 75px;
- padding trên 9 (top) là 25px
- padding phải(right) và trái (left) là 50px
- padding dưới (bottom) là 75px
Nếu thuộc tính padding có hai giá trị:
padding: 25px 50px;
- padding trên (top) và dưới (bottom) là 25px
- padding phải (right) và trái (left) là 50px
Nếu thuộc tính padding có một giá trị:padding: 25px;
- Tất cả các padding (top, right, bottom, left) đều là 25px
Ví dụ khác
Ví dụ này cho thấy một thuộc
tính rút gọn thiết lập tất cả các thuộc tính padding trong một mô tả
(declaration), có thể có từ một đến bốn giá trị.
Ví dụ này cho thấy cách thiết
lập padding bên trái của phần tử <p>.
Ví dụ này cho thấy cách thiết
lập padding bên phải của phần tử <p>.
Ví dụ này cho thấy cách thiết
lập padding trên (top) của một phần tử <p>.
Ví dụ này cho thấy cách thiết
lập padding dưới (bottom) của một phần tử <p>.
Tự làm bài tập!
Tất cả các thuộc tính CSS về Padding
Thuộc tính
|
Mô tả
|
Thuộc tính rút gọn để thiết
lập tất cả các padding (top, right, bottom, left) trong (declaration)
|
|
Thiết lập padding dưới
(bottom) của một phần tử
|
|
Thiết lập padding trái
(left) của một phần tử
|
|
Thiết lập padding phải
(right) cho một phần tử
|
|
Thiết lập padding trên
(top) cho một phần tử
|
CodeLean.vn
Facebook: CodeLean Community
إرسال تعليق