Kích thước nội tại
Trong CSS, kích thước nội tại (intrinsic size) của một phần tử là kích thước mà nó sẽ có dựa hoàn toàn vào nội dung của nó, không tính đến ảnh hưởng của ngữ cảnh bố cục mà nó xuất hiện. Đây là trái ngược với kích thước ngoại tại của phần tử, được xác định bởi các ràng buộc bên ngoài như kích thước container. Kích thước nội tại của phần tử được biểu thị bằng các kích thước min-content và max-content.
Các phần tử inline được định kích thước theo kiểu nội tại. Các thuộc tính của mô hình hộp CSS như height, width, block-size, inline-size, padding-block, và margin-block không ảnh hưởng đến bố cục của chúng (mặc dù margin-inline và padding-inline ảnh hưởng đến khoảng cách trong một dòng).
Ví dụ, kích thước nội tại tối thiểu của phần tử inline <span> là kích thước nhỏ nhất mà nó sẽ có nếu được float (không áp dụng thuộc tính hộp CSS nào khác) trong một container có inline-size: 0. Kích thước nội tại tối đa là ngược lại; đó là kích thước mà <span> tương tự sẽ có khi được đặt trong một container có inline-size vô hạn.
Kích thước nội tại có ý nghĩa tương tự cho hình ảnh như đối với văn bản — kích thước mà hình ảnh được hiển thị nếu không có CSS nào được áp dụng để thay đổi cách hiển thị.
Mật độ pixel và độ phân giải ảnh hưởng đến kích thước nội tại. Theo mặc định, hình ảnh được giả định có mật độ pixel "1x" (1 pixel thiết bị = 1 pixel CSS), trong trường hợp đó kích thước nội tại đơn giản là chiều cao và chiều rộng pixel. Kích thước nội tại và độ phân giải của hình ảnh có thể được chỉ định rõ ràng trong dữ liệu EXIF của nó. Mật độ pixel của hình ảnh cũng có thể được đặt bằng thuộc tính srcset. Lưu ý nếu cả hai cơ chế đều được sử dụng, giá trị srcset được áp dụng "đè lên" giá trị EXIF.
Kích thước nội tại và cách tính chúng được định nghĩa trong module CSS box sizing.
Kích thước nội tại tối thiểu
Để đặt kích thước phần tử theo kích thước nội tại tối thiểu, đặt inline-size (hoặc width trong chế độ viết ngang, như tiếng Anh và tiếng Hebrew) thành min-content. Điều này đặt phần tử về kích thước mà văn bản sẽ được bọc nhỏ nhất có thể theo chiều inline mà không gây tràn, với việc bọc mềm nhiều nhất có thể. Với một hộp chứa chuỗi văn bản, kích thước nội tại tối thiểu sẽ được xác định bởi từ dài nhất.
p {
inline-size: min-content;
background-color: palegoldenrod;
}
Kích thước nội tại tối đa
Kích thước nội tại tối đa là ngược lại. Đó là kích thước của phần tử nếu inline-size của container là vô hạn. Nội dung văn bản sẽ hiển thị rộng nhất có thể, không có bọc mềm, ngay cả khi nó tràn ra ngoài container. Giá trị từ khóa max-content thiết lập hành vi này.
p {
width: max-content;
background-color: palegoldenrod;
}
Xem thêm
- Các thuật ngữ liên quan:
- Các từ khóa kích thước CSS
min-content,max-content, vàfit-content interpolate-sizeaspect-ratiocalc-size()- Module CSS box sizing
- Đặc tả CSS Box Sizing Module Level 3