Thuộc tính khối chèn CSS
Ví dụ
Đặt khoảng cách đến phần tử cha từ phần tử <div> được định vị theo hướng khối:
div {
inset-block: 10px 50px;
}
Hãy tự mình thử »Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính inset-block
đặt khoảng cách giữa phần tử và phần tử cha theo hướng khối.
Lưu ý: Để thuộc tính này có hiệu lực, nó phải có thuộc tính position
được chỉ định.
Thuộc tính inset-block
là thuộc tính viết tắt của các thuộc tính sau:
Các giá trị cho thuộc tính inset-block
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính inset-block có hai giá trị:
- khối chèn: 10px 50px;
- khoảng cách lúc bắt đầu là 10px
- khoảng cách ở cuối là 50px
Nếu thuộc tính inset-block có một giá trị:
- khối chèn: 10px;
- khoảng cách lúc bắt đầu và kết thúc là 10px
Các thuộc tính CSS inset-block
và inset-inline
rất giống với các thuộc tính CSS top
, bottom
, left
và right
, nhưng các thuộc tính inset-block
và inset-inline
phụ thuộc vào hướng khối và nội tuyến.
Lưu ý: writing-mode
tính CSS liên quan xác định hướng khối. Điều này ảnh hưởng đến vị trí bắt đầu và kết thúc của một khối cũng như kết quả của thuộc tính inset-block
. Đố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.insetBlock="100px 50px" 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 | |||||
---|---|---|---|---|---|
inset-block | 87.0 | 87.0 | 63.0 | 14.1 | 73.0 |
Cú pháp CSS
inset-block: auto| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default. The element's default inset-block value. | Demo ❯ |
length | Specifies distance in px, pt, cm, etc. Negative values are allowed. Read about length units | Demo ❯ |
% | Specifies distance in percent relative to size of parent element on the corresponding axis. | 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 tính writing-mode
của phần tử <div> được đặt thành Vertical-rl, phần đầu của phần tử được di chuyển từ trên sang bên phải và phần cuối của phần tử được di chuyển từ dưới lên sang bên trái của phần tử:
div {
inset-block: 10px 50px;
writing-mode: vertical-rl;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Vị trí CSS
Thuộc tính vị trí CSS: Thuộc tính Vị trí CSS
Thuộc tính CSS inset-block-end: Thuộc tính CSS Inset-block-end
Thuộc tính CSS inset-block-start: Thuộc tính CSS Inset-block-start
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS