Thuộc tính kích thước nội tuyến tối thiểu của CSS
Ví dụ
Đặt kích thước tối thiểu của phần tử <div> thành 200 pixel theo hướng nội tuyến:
div {
min-inline-size: 200px;
}
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 min-inline-size
chỉ định kích thước tối thiểu của một phần tử theo hướng nội tuyến.
Nếu nội dung nhỏ hơn kích thước tối thiểu theo hướng nội tuyến, giá trị thuộc tính min-inline-size
sẽ được áp dụng.
Nếu nội dung lớn hơn kích thước tối thiểu theo hướng nội tuyến thì giá trị thuộc tính min-inline-size
không có hiệu lực.
Lưu ý: writing-mode
thuộc tính CSS liên quan xác định hướng nội tuyến và điều này ảnh hưởng đến kết quả của thuộc tính min-inline-size
. Đố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.
Thuộc tính CSS min-inline-size
rất giống với thuộc tính CSS min-height
và min-width
, nhưng thuộc tính min-inline-size
phụ thuộc vào hướng nội tuyến.
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.minInlineSize="10px" 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 | |||||
---|---|---|---|---|---|
min-inline-size | 57.0 | 79.0 | 41.0 | 12.1 | 44.0 |
Cú pháp CSS
min-inline-size: auto| value |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default. The element's default min-inline-size value. | Demo ❯ |
length | Specifies min-inline-size in px, pt, cm, etc. Read about length units | Demo ❯ |
% | Specifies min-inline-size 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ụ
Chế độ viết
Với giá trị thuộc tính writing-mode
của phần tử <div> được đặt thành Vertical-rl, hướng nội tuyến được thay đổi từ ngang sang hướng xuống và điều này ảnh hưởng đến cách hoạt động của thuộc tính min-inline-size
:
div {
min-inline-size: 260px;
writing-mode: vertical-rl;
}
Hãy tự mình thử »Kích thước nội tuyến tối thiểu so với kích thước nội tuyến
Xem cách một phần tử div có inline-size
200px và một div khác có min-inline-size
200px, phản ứng khác nhau như thế nào khi thay đổi kích thước nội dung:
#div1 {
min-inline-size: 200px;
}
#div2 {
inline-size: 200px;
}
Hãy tự mình thử »Trang liên quan
Thuộc tính kích thước nội tuyến CSS: Thuộc tính kích thước nội tuyến CSS
Thuộc tính CSS max-inline-size: Thuộc tính CSS Max-inline-size
Thuộc tính chiều cao tối thiểu của CSS: Thuộc tính chiều cao tối thiểu của CSS
Thuộc tính chiều rộng tối thiểu của CSS: Thuộc tính chiều rộng tối thiểu của CSS
Thuộc tính chế độ viết CSS: Thuộc tính chế độ viết CSS