Thuộc tính đệm nội tuyến CSS
Ví dụ
Đặt phần đệm ở cả hai bên theo hướng nội tuyến:
div {
padding-inline: 50px;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
padding-inline
của một phần tử là khoảng trắng từ đường viền đến nội dung của nó theo hướng nội tuyến và nó là thuộc tính tốc ký cho các thuộc tính sau:
Các giá trị cho thuộc tính padding-inline
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính đệm nội tuyến có hai giá trị:
- đệm-nội tuyến: 10px 50px;
- phần đệm khi bắt đầu là 10px
- phần đệm ở cuối là 50px
Nếu thuộc tính đệm nội tuyến có một giá trị:
- đệm-nội tuyến: 10px;
- phần đệm ở đầu và cuối là 10px
Các thuộc tính CSS padding-inline
và padding-block
rất giống với các thuộc tính CSS padding-top
, padding-bottom
, padding-left
và padding-right
, nhưng các thuộc tính padding-inline
và padding-block
phụ thuộc vào hướng nội tuyến và khối.
Lưu ý: writing-mode
và direction
của các thuộc tính CSS liên quan xác định hướng nội tuyến. Điều này ảnh hưởng đến vị trí bắt đầu và kết thúc của một phần tử theo hướng nội tuyến và kết quả của thuộc tính padding-inline
. Đối với các trang bằng tiếng Anh, hướng khối là hướng xuống và hướng nội tuyến là từ trái sang phải.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.paddingInline="100px 20px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
padding-inline | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Cú pháp CSS
padding-inline: auto| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default. The element's default padding-inline distance. | Demo ❯ |
length | Specifies distance in px, pt, cm, etc. Negative values are not allowed. Read about length units | Demo ❯ |
% | Specifies distance in percent relative to size of parent element in the inline direction. | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Với giá trị thuộc writing-mode
của phần tử <div> được đặt thành rl dọc, hướng nội tuyến hướng xuống dưới. Kết quả là phần đầu của phần tử được di chuyển từ bên trái lên trên và phần cuối của phần tử được di chuyển từ bên phải xuống dưới:
div {
writing-mode: vertical-rl;
padding-inline: 10px 100px;
}
Hãy tự mình thử »Ví dụ
Với giá trị thuộc tính direction
của phần tử <div> được đặt thành rtl, hướng trong dòng là từ phải sang trái. Kết quả là phần đầu của phần tử được di chuyển từ bên trái sang bên phải và phần cuối của phần tử được di chuyển từ bên phải sang bên trái:
div {
direction: rtl;
padding-inline: 10px 100px;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính hướng CSS: Thuộc tính CSS Direction
Thuộc tính CSS Padding-inline-end: Thuộc tính CSS Padding-inline-end
Thuộc tính CSS đệm-inline-start: Thuộc tính CSS Padding-inline-start
Thuộc tính CSS Padding-bottom: Thuộc tính CSS Padding-bottom
Thuộc tính đệm nội tuyến CSS: CSS Padding-inline
Thuộc tính CSS Padding -left: CSS Padding-left
Thuộc tính CSS Padding-right: CSS Padding-right
Thuộc tính CSS Padding -top: CSS Padding-top
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS