padding-right
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 padding-right CSS đặt độ rộng của vùng padding ở bên phải của một phần tử.
Try it
padding-right: 1.5em;
padding-right: 10%;
padding-right: 20px;
padding-right: 1ch;
padding-right: 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 cách giữa nội dung của nó và đường viền.
Note:
Thuộc tính padding có thể được dùng để đặt padding cho cả bốn phía của một phần tử chỉ với một khai báo.
Cú pháp
/* Giá trị <length> */
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;
/* Giá trị <percentage> */
padding-right: 10%;
/* Giá trị toàn cục */
padding-right: inherit;
padding-right: initial;
padding-right: revert;
padding-right: revert-layer;
padding-right: unset;
Thuộc tính padding-right được chỉ định là một giá trị đơn chọn từ danh sách bên dưới. Không giống như margin, các giá trị âm không được phép dùng cho padding.
Giá trị
<length>-
Kích thước padding dưới dạng giá trị cố định. Phải không âm.
<percentage>-
Kích thước padding dưới dạng phần trăm, tương đối với kích thước nội tuyến (width trong ngôn ngữ chiều ngang, được xác định bởi
writing-mode) của khối chứa. Phải không âm.
Định nghĩa hình thức
| Initial value | 0 |
|---|---|
| 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 | the percentage as specified or the absolute length |
| Animation type | a length |
Cú pháp hình thức
padding-right =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Ví dụ
Đặt padding phải bằng pixel và phần trăm
.content {
padding-right: 5%;
}
.side-box {
padding-right: 10px;
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-physical |
Khả năng tương thích trình duyệt
Xem thêm
padding-top,padding-bottom, vàpadding-leftpaddingviết tắtpadding-block-start,padding-block-end,padding-inline-start, vàpadding-inline-endpadding-blockvàpadding-inlineviết tắt- Hướng dẫn Giới thiệu về mô hình hộp CSS
- Mô-đun mô hình hộp CSS