padding-inline
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
Thuộc tính CSS padding-inline là thuộc tính viết tắt xác định padding logic đầu và cuối theo hướng inline của một phần tử, ánh xạ sang các thuộc tính padding vật lý tùy thuộc vào chế độ viết, hướng và định hướng chữ của phần tử.
Try it
padding-inline: 5% 10%;
writing-mode: horizontal-tb;
padding-inline: 15px 40px;
writing-mode: vertical-rl;
padding-inline: 5% 20%;
writing-mode: horizontal-tb;
direction: rtl;
<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;
unicode-bidi: bidi-override;
}
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
/* Giá trị <length> */
padding-inline: 10px 20px; /* Độ dài tuyệt đối */
padding-inline: 1em 2em; /* tương đối so với kích thước chữ */
padding-inline: 10px; /* thiết lập cả giá trị đầu và cuối */
/* Giá trị <percentage> */
padding-inline: 5% 2%; /* tương đối so với chiều rộng của khối chứa gần nhất */
/* Giá trị toàn cục */
padding-inline: inherit;
padding-inline: initial;
padding-inline: revert;
padding-inline: revert-layer;
padding-inline: unset;
Thuộc tính padding-inline có thể được chỉ định bằng một hoặc hai giá trị. Nếu chỉ định một giá trị, giá trị đó được dùng cho cả padding-inline-start và padding-inline-end. Nếu chỉ định hai giá trị, giá trị đầu tiên dùng cho padding-inline-start và giá trị thứ hai dùng cho padding-inline-end.
Giá trị
<length>-
Kích thước của padding dưới dạng giá trị cố định. Phải không âm.
<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. Phải không âm.
Mô tả
Các giá trị padding được chỉ định bởi padding-inline có thể tương đương với các thuộc tính padding-top và padding-bottom hoặc padding-right và padding-left, tùy thuộc vào các giá trị được xác định cho writing-mode, direction và text-orientation.
Đị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 |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as each of the properties of the shorthand: |
| Animation type | a length |
Cú pháp hình thức
padding-inline =
<'padding-top'>{1,2}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Ví dụ
Thiết lập padding inline cho văn bản dọc
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
padding-inline: 20px 40px;
background-color: #c8c800;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-padding-inline |
Khả năng tương thích trình duyệt
Xem thêm
- Thuộc tính và giá trị logic CSS
- Các thuộc tính vật lý tương ứng:
padding-top,padding-right,padding-bottomvàpadding-left writing-mode,direction,text-orientation