HTML - 버튼은 인라인 요소이지만?

Question

단추가 인라인 요소이지만 너비 속성이 작동합니다. 어떻게됩니까? http://jsfiddle.net/3b6r02fh/

button { 
    width: 300px; 
} 

Answer 1

inline 요소

Answer 2

에 반대

button가하는 width 설정을 할 수 있습니다 (기본적으로)를 inline-block 요소 W3C Reference (HTML4 요소의 기본 CSS 스타일 목록)를 참조하십시오 대부분의 브라우저는 기본값으로 Appendix D. Default style sheet for HTML 4에 따라 inline-block으로 button 요소를 표시합니다.

따라서 Calculating widths and margins - Inline-block, non-replaced에 설명 된대로 width 속성이 작동한다고 기대할 수 있습니다.

하지만 그게 아닙니다. button 요소 replaced elements 같습니다

CSS에서

하는 대체 요소가 그 CSS 표현의 범위 밖 원소이다. 이것들은 표현이 CSS와 독립적 인 종류의 외부 객체입니다.

따라서 특수 효과가 있습니다. 예를 들어 display: inline-block 또는 display: inline이 있는지 여부와 관계없이 Calculating widths and margins - Inline, replaced에 따라 width 속성을 고려한 크기입니다.

HTML5가 어쨌든 inline-block으로 표시되도록 강요하는 것은 가치가 있습니다. 이것은 10.5.2 Bindings - The button element 설명한다 : 결합가 button 소자에 적용 버튼 소자 가 그 버튼으로 렌더링에 '인라인 블록'상자로 렌더링하는 예상

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

contents는 요소의 내용입니다.