Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
8 replies
prophile

Confused why certain elements aren't full-width in display: block

In this example:
<div class="foo">
    Bar <button>Bazz</button>
</div>


with

.foo {
    background: lightgreen;
}

button {
    display: block;
}


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!)
Was this page helpful?