Thuộc tính chèn CSS
Ví dụ
Đặt khoảng cách đến phần tử cha từ phần tử <div> được định vị:
div {
inset: 35px;
}
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
Thuộc tính inset
đặt khoảng cách giữa phần tử và phần tử cha.
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
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
có thể được đặt theo nhiều cách khác nhau:
Nếu thuộc tính chèn có bốn giá trị:
- hình nhỏ: 15px 30px 60px 90px;
- khoảng cách trên cùng là 15px
- khoảng cách bên phải là 30px
- khoảng cách dưới cùng là 60px
- khoảng cách bên trái là 90px
Nếu thuộc tính chèn có ba giá trị:
- hình nhỏ: 15px 30px 60px;
- khoảng cách trên cùng là 15px
- khoảng cách trái và phải là 30px
- khoảng cách dưới cùng là 60px
Nếu thuộc tính chèn có hai giá trị:
- hình nhỏ: 15px 30px;
- khoảng cách trên và dưới là 15px
- khoảng cách trái và phải là 30px
Nếu thuộc tính chèn có một giá trị:
- hình nhỏ: 10px;
- cả bốn khoảng cách đều là 10px
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.inset="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 | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
Cú pháp CSS
inset: auto| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default. The element's default inset distance. | Demo ❯ |
length | Specifies inset 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ụ
Đặt giá trị thuộc tính lồng ghép của phần tử <div> thành khoảng cách 15 pixel đến phần tử gốc từ trên xuống dưới và 30 pixel từ trái và phải:
div {
inset: 15px 30px;
}
Hãy tự mình thử »Ví dụ
Đặt giá trị thuộc tính bên trong của phần tử <div> thành khoảng cách 15 pixel đến phần tử gốc từ trên cùng, 30 pixel từ trái và phải và 60 pixel từ dưới cùng:
div {
inset: 15px 30px 60px;
}
Hãy tự mình thử »Ví dụ
Đặt giá trị thuộc tính bên trong của phần tử <div> thành khoảng cách 15 pixel từ trên xuống, 30 pixel từ bên phải, 60 pixel từ dưới cùng và 90 pixel từ bên trái:
div {
inset: 15px 30px 60px 90px;
}
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 Bottom: Thuộc tính CSS Bottom
Thuộc tính CSS Left: Thuộc tính CSS Left
Thuộc tính quyền CSS: Thuộc tính quyền CSS
Thuộc tính CSS hàng đầu: Thuộc tính CSS Top