8 replies

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

In this example:

<div class="foo">
    Bar <button>Bazz</button>
</div>

<div class="foo">
    Bar <button>Bazz</button>
</div>

with

.foo {
    background: lightgreen;
}

button {
    display: block;
}

.foo {
    background: lightgreen;
}

button {
    display: block;
}

I would have expected the change of button from

display: inline

display: inline

display: block

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

display: block

though. What am I missing? Why is it not full-width?

(I realise I could add an

inline-size

inline-size

to change it, but I'm looking to plug the gap in my knowledge rather than fix a specific problem!)

KP-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>

<div class="foo">
    Bar <button>Bazz</button>
</div>

with

.foo {
    background: lightgreen;
}

button {
    display: block;
}

.foo {
    background: lightgreen;
}

button {
    display: block;
}

I would have expected the change of button from

display: inline

display: inline

display: block

display: block

display: block

display: block

though. What am I missing? Why is it not full-width?

(I realise I could add an

inline-size

inline-size

to change it, but I'm looking to plug the gap in my knowledge rather than fix a specific problem!)

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads