padding
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính CSS padding là thuộc tính viết tắt dùng để thiết lập vùng padding cho cả bốn cạnh của một phần tử cùng một lúc.
Try it
padding: 1em;
padding: 10% 0;
padding: 10px 50px 20px;
padding: 10px 50px 30px 0;
padding: 0;
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
}
Vùng padding của một phần tử là khoảng trống giữa nội dung và đường viền (border) của nó.
Note:
Padding tạo thêm khoảng trống bên trong phần tử. Ngược lại, margin tạo thêm khoảng trống bên ngoài phần tử.
Các thuộc tính thành phần
Thuộc tính này là cách viết tắt cho các thuộc tính CSS sau:
Cú pháp
/* Áp dụng cho cả bốn cạnh */
padding: 1em;
/* trên và dưới | trái và phải */
padding: 5% 10%;
/* trên | trái và phải | dưới */
padding: 1em 2em 2em;
/* trên | phải | dưới | trái */
padding: 5px 1em 0 2em;
/* Giá trị toàn cục */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;
Thuộc tính padding có thể được chỉ định bằng một, hai, ba hoặc bốn giá trị. Mỗi giá trị là <length> hoặc <percentage>. Giá trị âm không hợp lệ.
- Khi chỉ định một giá trị, padding đó áp dụng cho cả bốn cạnh.
- Khi chỉ định hai giá trị, padding đầu tiên áp dụng cho trên và dưới, giá trị thứ hai cho trái và phải.
- Khi chỉ định ba giá trị, padding đầu tiên áp dụng cho trên, giá trị thứ hai cho phải và trái, giá trị thứ ba cho dưới.
- Khi chỉ định bốn giá trị, các padding áp dụng lần lượt cho trên, phải, dưới và trái (theo chiều kim đồng hồ).
Giá trị
<length>-
Kích thước của padding dưới dạng giá trị cố định.
<percentage>-
Kích thước của padding dưới dạng phần trăm, tương đối so với kích thước inline (width trong ngôn ngữ nằm ngang, được xác định bởi
writing-mode) của khối chứa.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand: |
|---|---|
| Applies to | all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | a length |
Cú pháp hình thức
padding =
<'padding-top'>{1,4}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Ví dụ
Thiết lập padding bằng pixel
HTML
<h4>Phần tử này có padding vừa phải.</h4>
<h3>Padding của phần tử này rất lớn!</h3>
CSS
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
Kết quả
Thiết lập padding bằng pixel và phần trăm
padding: 5%; /* Tất cả các cạnh: padding 5% */
padding: 10px; /* Tất cả các cạnh: padding 10px */
padding: 10px 20px; /* trên và dưới: padding 10px */
/* trái và phải: padding 20px */
padding: 10px 3% 20px; /* trên: padding 10px */
/* trái và phải: padding 3% */
/* dưới: padding 20px */
padding: 1em 3px 30px 5px; /* trên: padding 1em */
/* phải: padding 3px */
/* dưới: padding 30px */
/* trái: padding 5px */
Đặc tả
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-shorthand |
Khả năng tương thích trình duyệt
Xem thêm
padding-top,padding-right,padding-bottomvàpadding-leftpadding-block-start,padding-block-end,padding-inline-startvàpadding-inline-end- Các thuộc tính viết tắt
padding-blockvàpadding-inline - Hướng dẫn Giới thiệu về mô hình hộp CSS
- Mô-đun Mô hình hộp CSS