Wrong Visulation of Display Property

[viktiwari12]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/display

What specific section or headline is this issue about?

First section - Try it!

What information was incorrect, unhelpful, or incomplete?

In the display section, one of the properties is Display: block;

The corresponding visual effect is not what it should be.
Instead of being a display block, the boxes are being displayed inline.

What did you expect to see?

The inner boxes- one, two, three- should be displayed top to bottom, not left to right!

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/display
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/display
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/display/index.md
• Last commit: b9db4e5
• Document last modified: 2023-12-26T21:19:48.000Z

[wbamberg]

The box which is getting display assigned is the outer box: the one with the blue border - and not the boxes with "One"/"Two"/"Three" in them.

That said, I can see how this is confusing. Perhaps the text content of the inner boxes could indicate that they are the contents of the target?

This should be transferred to https://github.com/mdn/interactive-examples, but let's leave it here for a bit since this repo gets more eyes, and maybe people will have good idea for how to make the example clearer.

[OnkarRuikar]

That said, I can see how this is confusing. Perhaps the text content of the inner boxes could indicate that they are the contents of the target?

@wbamberg I've created a PR mdn/interactive-examples#2710

This should be transferred to https://github.com/mdn/interactive-examples, but let's leave it here for a bit since this repo gets more eyes

Would be nice if we bring example repos under mdn/content.