Confused why certain elements aren't full-width in display: block
In this example:
with
I would have expected the change of button from
display: inline to display: block to have made it full-width, because my understanding is that block elements are always full-width (or rather full inline size) unless styled otherwise. But the button does not change width, it's still shrink-wrapped around its contents. It does move onto a separate line and inspecting it shows it does have display: block though. What am I missing? Why is it not full-width?
(I realise I could add an inline-size to change it, but I'm looking to plug the gap in my knowledge rather than fix a specific problem!)7 Replies
A button is a replaced element so yes display block moves it onto its own line but still has some defaults like other form elements in terms of dimension and padding/margin. For a button to take full-width you do have to set it explicitly to take 100% as you mentioned.
Replaced elements are elements whose appearance and dimensions are defined by an external resource (e.g., an image, a video, or form controls like <button>, <input>, etc.).
Aha! So even with
appearance: none it's still a replaced element?It alters its appearance and behaviour but doesn't completely nuke the defaults applied to form elements
Where can I learn more about this in specifications? I've been looking in "CSS Display Module Level 3" couldn't find anything about this
This has some useful info on buttons display https://html.spec.whatwg.org/multipage/rendering.html#button-layout
Aha, grand. Thank you both!
I’m not much for the spec , I’m not clever enough to parse through it . Found this here where there’s a few more reference to replaced elements on the page
Replaced element An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document). User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party. For example, if an HTML document changed intrinsic size depending on the user's bank balance, then the UA might want to act as if that resource had no intrinsic dimensions. The content of replaced elements is not considered in the CSS rendering model. Also this in module 3 you referenced However some types of replaced elements, such as form controls, can have a natural width and a natural height, but no natural aspect ratio. If an object has a degenerate natural aspect ratio (at least one part being zero or infinity), it is treated as having no natural aspect ratio.