Kích thước ngoại lai

Trong CSS, kích thước ngoại sinh (extrinsic size) của một phần tử được xác định bởi ngữ cảnh bố cục của nó, tức là bằng các ràng buộc áp đặt từ bên ngoài phần tử, không xét đến nội dung của nó. Đây là điều ngược lại với kích thước nội sinh của phần tử, dựa trên nội dung của nó.

Kích thước ngoại sinh xảy ra khi bạn đặt rõ ràng hoặc ràng buộc kích thước của phần tử bằng các thuộc tính CSS box model như width, height, block-size, inline-size, max-width, và min-height. Ví dụ, khi bạn đặt width: 200px, bạn đang chỉ định kích thước ngoại sinh.

Giá trị phần trăm cũng là ngoại sinh; chúng được tính toán tương đối với containing block của phần tử. Ví dụ, width: 50% có nghĩa là chiều rộng của phần tử sẽ là 50% chiều rộng của containing block của nó, bất kể nội dung bên trong phần tử.

Các phần tử block-level được định kích thước ngoại sinh. Khi không chỉ định chiều rộng, chiều rộng mặc định của phần tử block là auto, giải thành chiều rộng 100% của containing block của nó.