[CSS] docs: Correct display value and BFC behavior for button elements

[kannanwisen]

Description

This pull request corrects the documentation regarding the default display value and Block Formatting Context (BFC) behavior for and button types.

The current text contains two related statements that incorrectly assert that these elements default to display: flow-root. This PR removes both and replaces them with a single, accurate explanation.

Summary of Inaccuracies:

• Incorrect display Value: The default user-agent style for these elements is display: inline-block, not display: flow-root.
• False Equivalence: The text groups button (a container element ) and input (a void element) together, which is imprecise. The BFC on a button element meaningfully contains its children, whereas the BFC on an input element is an empty context.
• Confusing Rationale: The second sentence targeted by this PR is circular and grammatically incorrect, adding unnecessary confusion.

Motivation

This change provides a more accurate and nuanced explanation for developers.

Additional details

Suggested Change:

REMOVE the following two statements:

...defaulting to display: flow-root.

and

This is the default rendering for <button> elements and button <input> types meaning button's create a new BFC as long as their display value isn't set to a value that doesn't automatically create a new BFC.

REPLACE them with this single, correct paragraph:

By default, browser user-agent stylesheets render <button> and button <input> types as inline-block elements. This display type causes them to establish a new Block Formatting Context (BFC). For the container <button> element, this BFC meaningfully contains its children; for the void <input> element, this context is empty.

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/CSS_display/Block_formatting_context

(comment last updated: 2025-07-24 14:26:00)

[chrisdavidmills]

Hi @kannanwisen, and thanks for trying to clean up this rather confusing prose. I thought the first line you modified was trying to say that some buttons and inputs default to display: flow-root, but I've done some testing, and that looks to be incorrect. They all default to display: inline-block as far as I can tell.

I agree that the second line that you've outright removed can be removed — it is badly written and confusing.

However, I think there is still work to do earlier on — I'd argue that the first line you've modified could just be removed as well. Earlier on in the bulleted list, there is a line that says "Inline-blocks (elements with {{cssxref("display", "display: inline-block")}}).", which covers the inline-block case.

If you want to keep your explanatory text about buttons and inputs defaulting to inline-block, I'd suggest adding it to the line I've cited instead, so the reader has some examples. You could then remove the line you edited to reduce repetition.

[kannanwisen]

Kindly wait, both the pull the request I will update soon.

[kannanwisen]

Hi @kannanwisen, and thanks for trying to clean up this rather confusing prose. I thought the first line you modified was trying to say that some buttons and inputs default to display: flow-root,

Hi @chrisdavidmills

Thank you for reviewing my contribution.

I believe there might be a misunderstanding—I don’t recall intentionally stating that some buttons and inputs default to display: flow-root. If possible, could you kindly highlight where in my changes or comment this was implied? I’d like to review and clarify that part properly.

Currently, I only see this part of our conversation, but I’ll make sure to respond to the rest of the feedback as soon as it becomes available.

Thanks again for your time and support!

[chrisdavidmills]

I believe there might be a misunderstanding—I don’t recall intentionally stating that some buttons and inputs default to display: flow-root. If possible, could you kindly highlight where in my changes or comment this was implied? I’d like to review and clarify that part properly.

@kannanwisen, sorry for the misunderstanding. I'm not saying your changes or comments imply that. I'm saying that some of the text, as it was originally, before you edited it, implied that.