Presentation of fieldsets magically and irreversibly changes when the fieldset contains a legend

• Component: Layout and Rendering
• Status: UNCONFIRMED ---

[Justin French]

When you add a legend element as a child to a fieldset, the fieldset's appearance changes in a way which isn't reflected in the Inspector, doesn't appear to be done with styles, and can't be corrected or reversed by applying additional styles.

I know and fully understand that this is the default presentation style for fieldsets with legends in many user agents, but my concern is that these visual changes do not appear to have been done with CSS, are not reflected in the Inspector pallet, and can't be reversed or altered by a stylesheet author who is aiming for a different presentation.

The Safari HTML reference seems to describe the behavior (emphasis mine):
"This tag specifies the label for a fieldset (specified by the <fieldset> tag). The caption specified by content is *merged with the box surrounding the fieldset.*"

I'm not arguing that this should not be the default presentational style, but I am arguing that it should be achieved with regular styles and positioning, so that stylesheet authors can alter the presentation to suit their needs.  The only choice I seem to have right now is absolutely positioning the legend within a relatively positioned fieldset.

If it *is* possible to alter this default presentation (perhaps by altering a -webkit value somewhere, I'd love for it to be known and documented.

For the record, when a fieldset has a legend child element added to it, the visual changes are best described as follows:

* hovering over the element with the inspector seems to show the box with the same top position (where it would be located if there was no legend element)
* the visual top edge of the fieldset box (where the border and background color starts) appears to shift down by half the line height of the legend element
* the legend element is shifted up by half it's line height

[Maxwell Terpstra]

Created attachment 43913 [details]
fieldset/legend example/explaination and CSS equivalent

[Maxwell Terpstra]

Two additional points about the visual affect of the legend:
* The fieldset's border is masked out in the area beneath the legend's border box, but the fieldset's background is not.
* The outer padding edge of the fieldset is aligned to the bottom edge of the legend.  The background, however, still reaches to the edge of the border box.

Neither of these effects are possible using CSS without additional markup and non-relative, pre-computed padding values.


I have attached an HTML document which illustrates the problem in detail and suggests possible CSS equivalents.

[Simon Pieters (:zcorpan)]

Proposal to be able to turn off magic for fieldset and legend at https://github.com/whatwg/html/issues/3912