Perché display: block non allungare pulsanti o elementi di input

Question

che sto cercando di capire il motivo alla base di questo problema:

Qual è la ragione di fondo dietro <button> o <input> elementi non comportarsi come gli altri elementi se impostato su display:block!

Non sto cercando soluzioni alternative per risolvere questo problema, quindi per favore non puntare a this answer perché non risponde alla domanda.

Here's a js-fiddle that illustrates the problem

Update 1: @Pete è corretto, l'attributo dimensione predefinita di un elemento è ciò che contraddistingue la dimensione anche sul blocco, come si può in this fiddle la dimensione e cols attributo della <input> e <textarea> cambia la loro larghezza. Questo risolve parte della mia domanda.

Con questo in mente, la mia domanda è ora, perché è l'elemento<button>non comportarsi come gli altri elementi di blocco? È un mistero per me!

Answer 1

penso che un valore predefinito viene assegnato all'attributo dimensioni di input che significa che a meno che non specificatamente ignorare che, la larghezza non sarà al 100%

Se si guarda al firefox specification e scorrere verso il basso per la sezione sulla dimensione, si può vedere che essi hanno un valore predefinito di 20

non sono sicuro circa le proprietà per il pulsante che causano che non essere al 100% la larghezza quando cambiato per bloccare