- From: gitspeaks via GitHub <sysbot+gh@w3.org>
- Date: Wed, 04 Dec 2024 12:17:19 +0000
- To: public-css-archive@w3.org
gitspeaks has just created a new issue for https://github.com/w3c/csswg-drafts: == Clarify the relationship between anonymous block boxes and inline element boxes == The [CSS 2, section 9.2.1.1](https://www.w3.org/TR/CSS22/visuren.html) states: > if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have *only* block-level boxes inside it. While the specification provides an example involving text sequences, it lacks detailed clarification regarding the behavior of inline elements in such scenarios. Consider the following example: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <style> .block { width: 200px; height: 50px; background-color: blue; } </style> <body> <div> <div class="block">Block Level</div> <a style="padding-top: 25px; background-color: red">Inline Level</a> <div class="block">Block Level</div> </div> </body> </html> ``` Expected Behavior: If the inline element is wrapped in an anonymous block box, one would expect the inline element box to contribute to the height of the anonymous block box. This should result in a red box painted below the first blue box, in accordance with block-level layout rules. Actual Behavior: The inline element box appears to escape the anonymous block box, overlapping the first blue `div` . This behavior is unexpected and deviates from the intuitive application of block-level layout rules. ![anonymous](https://github.com/user-attachments/assets/016c59b7-907b-41df-8c6e-2b67a8846551) Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11324 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 4 December 2024 12:17:20 UTC