Khi một hộp inline chứa một hộp khối cấp trong dòng chảy, hộp inline (và tổ tiên inline của mình trong cùng một hộp line) bị phá vỡ xung quanh hộp khối cấp (và bất kỳ anh chị em cấp khối nào liên tiếp hoặc được phân tách chỉ bằng khoảng trống có thể đóng lại và/hoặc các phần tử ngoài dòng), chia hộp nội tuyến thành hai hộp (ngay cả khi hai bên trống), một ở mỗi bên của khối -ống hộp (es). Các hộp dòng trước khi ngắt và sau khi ngắt được bao bọc trong các hộp khối ẩn danh và hộp cấp khối trở thành anh chị em của các hộp ẩn danh đó. Khi một hộp nội tuyến bị ảnh hưởng bởi vị trí tương đối, bất kỳ bản dịch kết quả nào cũng sẽ ảnh hưởng đến hộp cấp khối chứa trong hộp nội tuyến.
Mô hình này sẽ được áp dụng trong ví dụ sau nếu các quy tắc sau:
p { display: inline }
span { display: block }
đã được sử dụng với tài liệu HTML này:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
<BODY>
<P>
This is anonymous text before the SPAN.
<SPAN>This is the content of SPAN.</SPAN>
This is anonymous text after the SPAN.
</P>
</BODY>
Yếu tố P có chứa một đoạn (C1) của văn bản ẩn danh theo sau là một phần tử cấp khối theo sau bởi một đoạn văn bản ẩn danh (C2) khác. Các hộp kết quả sẽ là một hộp khối biểu diễn BODY, chứa một hộp khối ẩn danh quanh C1, hộp khối SPAN và một hộp khối ẩn danh khác xung quanh C2.
Thuộc tính của hộp ẩn danh được kế thừa từ hộp không ẩn danh kèm theo (ví dụ: trong ví dụ ngay bên dưới tiêu đề phụ "Hộp chặn ẩn danh", hộp dành cho DIV). Các thuộc tính không được kế thừa có giá trị ban đầu của chúng. Ví dụ: phông chữ của hộp ẩn danh được kế thừa từ DIV, nhưng lợi nhuận sẽ là 0.
Thuộc tính được đặt trên các yếu tố gây ra hộp khối ẩn danh được tạo vẫn áp dụng cho hộp và nội dung của phần tử đó. Ví dụ: nếu đường viền đã được đặt trên phần tử P trong ví dụ trên, đường viền sẽ được vẽ xung quanh C1 (mở ở cuối dòng) và C2 (mở ở đầu dòng).
Một số đại lý người dùng đã triển khai đường viền trên dòng nội tuyến chứa các khối theo cách khác, ví dụ: bằng cách gói các khối lồng nhau đó vào "hộp dòng ẩn danh" và do đó vẽ đường viền nội tuyến xung quanh các hộp đó. Vì CSS1 và CSS2 không xác định hành vi này, các tác nhân người dùng chỉ CSS1 và CSS2 có thể triển khai mô hình thay thế này và vẫn yêu cầu sự phù hợp với phần này của CSS 2.1. Điều này không áp dụng cho UA được phát triển sau khi đặc điểm kỹ thuật này được phát hành.
Làm như vậy bạn sẽ làm gì. Rõ ràng hành vi được chỉ định trong CSS, mặc dù hành vi đó bao gồm tất cả các trường hợp hoặc được triển khai nhất quán trên các trình duyệt hiện tại không rõ ràng.
Tôi rất vui vì html5 coi mã này hợp lệ, nhưng mã hợp lệ không phải là tất cả nội dung trên web. Các Googles sử dụng mã trông giống như súp thẻ bị hỏng khủng khiếp, nhưng nó hoạt động. – JKirchartz