padding-inline-start
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Thuộc tính CSS padding-inline-start xác định padding logic đầu theo hướng inline của một phần tử, ánh xạ sang 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-start: 20px;
writing-mode: horizontal-tb;
padding-inline-start: 20px;
writing-mode: vertical-rl;
padding-inline-start: 5em;
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ú pháp
/* Giá trị <length> */
padding-inline-start: 10px; /* Độ dài tuyệt đối */
padding-inline-start: 1em; /* Độ dài tương đối so với kích thước chữ */
/* Giá trị <percentage> */
padding-inline-start: 5%; /* Padding tương đối so với chiều rộng của khối chứa */
/* Giá trị toàn cục */
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: revert;
padding-inline-start: revert-layer;
padding-inline-start: unset;
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ả
Thuộc tính padding-inline-start nhận cùng các giá trị như các thuộc tính vật lý chẳng hạn như padding-top. Tuy nhiên, nó có thể tương đương với padding-left, padding-right, padding-top hoặc padding-bottom tùy thuộc vào các giá trị được đặt cho writing-mode, direction và text-orientation.
Nó liên quan đến padding-block-start, padding-block-end và padding-inline-end, là các thuộc tính xác định các giá trị padding còn lại của phần tử.
Đị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 |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | as <length> |
| Animation type | a length |
Cú pháp hình thức
padding-inline-start =
<'padding-top'>
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
Ví dụ
Thiết lập padding đầu 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-lr;
padding-inline-start: 20px;
background-color: #c8c800;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # padding-properties |
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