<display-outside>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Các từ khóa <display-outside> xác định kiểu display bên ngoài của phần tử, về cơ bản là vai trò của nó trong bố cục luồng. Những từ khóa này được dùng làm giá trị của thuộc tính display, và có thể dùng cho mục đích kế thừa dưới dạng từ khóa đơn, hoặc như được định nghĩa trong đặc tả cấp 3 cùng với một giá trị từ các từ khóa <display-inside>.
Cú pháp
Các giá trị <display-outside> hợp lệ:
block-
Phần tử tạo ra một hộp phần tử khối, sinh ra các ngắt dòng cả trước và sau phần tử khi ở trong luồng bình thường.
inline-
Phần tử tạo ra một hoặc nhiều hộp phần tử nội tuyến không tạo ra ngắt dòng trước hoặc sau chúng. Trong luồng bình thường, phần tử tiếp theo sẽ ở trên cùng dòng nếu còn chỗ.
Note:
Khi trình duyệt gặp thuộc tính display chỉ có giá trị bên ngoài (ví dụ: display: block hoặc display: inline), giá trị bên trong mặc định là flow (ví dụ: display: block flow và display: inline flow).
Điều này tương thích ngược với cú pháp từ khóa đơn.
Cú pháp chính thức
<display-outside> =
block |
inline |
run-in
Ví dụ
Trong ví dụ sau, các phần tử span (thường hiển thị là phần tử nội tuyến) được đặt thành display: block và do đó xuống dòng mới và mở rộng để lấp đầy vùng chứa theo chiều nội tuyến.
HTML
<span>span 1</span> <span>span 2</span>
CSS
span {
display: block;
border: 1px solid rebeccapurple;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Display Module Level 3 # typedef-display-outside |