Perché "display: block" e "width: auto" non estendono un pulsante per riempire il contenitore?

Question

Quando ho impostato display: block; e width: auto; su un pulsante, mi aspetto che il pulsante si allunghi per riempire il contenitore come fanno altri elementi di blocco. Per qualche motivo, non è così, almeno non nell'ultima versione di Chrome.

Quando ho cercato su Google, ho trovato un sacco di persone che facevano la stessa domanda, che erano soddisfatti di una risposta a "Come allungo i miei pulsanti per riempire il contenitore?" Questo è non quello che mi interessa. (Sono perfettamente in grado di allungare i miei pulsanti in qualsiasi modo mi serva.) Ispezionare le proprietà dei pulsanti, compresi quelli imposti di default dal browser, non mi ha aiutato neanche io.

Mi piacerebbe capire, ciò che causa i pulsanti per ignorare display: block; width: auto; e rimanere in dimensioni orizzontali in base al loro contenuto.

---

Ecco una dimostrazione di quello che voglio dire:

button { 
 
    display: block; 
 
}

<button style="width: auto;">button with `display:block; width:auto;`</button> 
 
<button style="width: 100%;">button with `display:block; width:100%`</button>

mi aspetto il pulsante con width:auto; per essere allungato come bene.

---

solo per essere assolutamente chiaro, questo non è un duplicato input with display:block is not a block, why not? o qualsiasi domanda simile, a meno che ha solo le risposte che descrive modi per allungare gli elementi in questione.

Modifica: Potrebbe essere un duplicato di What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container. D'altra parte, la domanda non menziona affatto i pulsanti. Devi leggere la risposta per scoprire che si applica anche ai pulsanti.

Answer 1

Ci sono alcuni elementi (<input>, <select>, <button>, <img>, <object> e <textarea>) che sono considerati elementi sostituiti cui aspetto e dimensioni sono definiti da una risorsa esterna. (ad esempio il sistema operativo, un plug-in, ecc.). Con HTML5 hai un altro paio di quelli come <audio> e <canvas> e some more.

elementi sostituiti possono avere valori definiti dall'elemento stesso, anziché dal suo ambiente nel documento intrinseca dimensioni larghezza e altezza. Ad esempio, se un elemento immagine ha una larghezza impostata su Auto, verrà utilizzata la larghezza del file immagine collegato. Le dimensioni intrinseche definiscono anche un rapporto intrinseco che viene utilizzato per determinare le dimensioni calcolate dell'elemento deve essere specificata solo una dimensione . Ad esempio, se solo la larghezza è specificata per un elemento immagine, ad esempio 100px, e l'immagine effettiva è 200 pixel larga e alta 100 pixel, l'altezza dell'elemento verrà ridimensionata di la stessa quantità, in 50px.

Gli elementi sostituiti possono anche avere requisiti di formattazione visiva imposti dall'elemento dall'elemento esterno al controllo del CSS; ad esempio, l'utente controlla i controlli dell'interfaccia per gli elementi del modulo.

(. Copia Shameless della risposta a questo source and possible dublicate, che estrae le informazioni da this article)

prega di notare che - come si vedrà nelle discussioni nei commenti - button non è davvero un replaced element defined by w3c. Tuttavia si comporta come uno, che è discusso ulteriormente in this article.