HTML – botón es un elemento en línea pero?

El botón es un elemento en línea, pero las propiedades de ancho funcionan en él, ¿cómo es posible? http://jsfiddle.net/3b6r02fh/

button { width: 300px; } 

La mayoría de los navegadores muestran los elementos del button como inline-block en inline-block por defecto, de acuerdo con el Apéndice D (no normativo) . Hoja de estilo predeterminada para HTML 4 .

Por lo tanto, podría esperar que la propiedad de width funcione, como se describe en Cálculo de anchuras y márgenes: bloque en línea, no reemplazado .

Pero no es solo eso. button elementos del button son elementos reemplazados :

En CSS, un elemento reemplazado es un elemento cuya representación está fuera del scope de CSS. Estos son tipos de objetos externos cuya representación es independiente del CSS.

Por lo tanto, tienen un comportamiento especial. Por ejemplo, independientemente de si tienen display: inline-block o display: inline , se dimensionan respetando la propiedad de width , de acuerdo con Cálculo de anchuras y márgenes: en línea, reemplazado .

Vale la pena señalar que HTML5 obliga a que se muestren como inline-block todos modos. Esto se explica en 10.5.2 Vinculaciones – El elemento del button :

 @namespace url(http://www.w3.org/1999/xhtml); button { binding: button; } 

Cuando el enlace de botón se aplica a un elemento de button , se espera que el elemento se represente como un cuadro de ‘bloque en línea’ representado como un botón cuyos contenidos son los contenidos del elemento.

Consulte la Referencia W3C (una lista de estilos HTML4 de estilos predeterminados de CSS)

button es un elemento de inline-block (por defecto) que puede tener un width establecido, a diferencia de los elementos en inline