為什麼 input 元素能用 width 屬性？
input元素是inline元素，為什麼還能用width屬性，按理說對inline元素設置width和height不起作用啊。哪位能解釋哈？
感謝邀請。明確的來說input是屬於inline-block元素，但inline-block 的概念最早是由置換元素演化而來的，和img一樣屬於可置換inline元素（Replaced element http://www.w3.org/TR/CSS21/conform.html#replaced-element），可置換元素擁有內在尺寸（intrinsic dimensions）：http://www.w3.org/TR/CSS21/conform.html#intrinsic
The width and height as defined by the element itself, not imposed by the surroundings. CSS does not define how the intrinsic dimensions are found. In CSS 2.1 only replaced elements can come with intrinsic dimensions. For raster images without reliable resolution information, a size of 1 px unit per image source pixel must be assumed.
另外可以參看各瀏覽器對input元素的默認樣式表：http://www.iecss.com/
input｛background-color: #FFF;
border-style: inset; border-width: 2px; font-family: sans-serif; font-size: 10pt;overflow: hidden;padding: 1px;zoom: 1;｝
注意加粗的兩個屬性overflow: hidden;與zoom:1;
這兩個屬性創建了BFC的同時也觸發了IE8以下版本IE瀏覽器的hasLayout，即可定義width height。參考：http://www.smallni.com/haslayout-block-formatting-contexts/PS：inline-block 在 CSS 2.1 中才正式確定，而低版本IE 的誕生遠早於 CSS 2.1，但對於低版本IE同樣支持某些特性。可以參考一絲胸的好文：http://www.iyunlu.com/view/css-xhtml/64.html
我還是那句話，把某個事物簡單的歸結為單一的觀點都是片面的。1、樓主主觀的認為 input 就是 inline 元素是片面的。2、@丁小倪 說是 inline-block 也是不全面的，因為 IE8 之前 CSS2.0 標準中是沒有 inline-block 這個概念的，但並不代表 IE6-7 不支持 inline-block 的某些特性，詳見《inline-block 前世今生》http://www.iyunlu.com/view/css-xhtml/64.html。3、元素默認以何種 display 屬性值顯示出來，這個其實更多的時候是由瀏覽器決定的（不同瀏覽器的差異性，導致我們需要 reset CSS），下面是部分瀏覽器 input 元素默認 CSS：IE6、IE7、IE8、IE9(部分)
background-color: #FFF;
border-width: 2px; font-family: sans-serif; font-size: 10pt; overflow: hidden;padding: 1px;
zoom: 1;
Webkit-r61376
input, textarea, keygen, select, button, isindex, datagrid {
margin: 0__qem; font: -webkit-small-control; color: initial; letter-spacing: normal; word-spacing: normal; line-height: normal;text-transform: none;
text-indent: 0; text-shadow: none; display: inline-block; text-align: -webkit-auto;}input[type="search"] { -webkit-appearance: searchfield; -webkit-box-sizing: border-box;}
我們可以看到在IE中，input 默認樣式 zoom:1; overflow: hidden;都是觸發了 hasLayout 或者 Block formatting contexts。webkit 內核瀏覽器中是默認定義為 inline-block 的，firefox 和 opera 默認沒有定義任何 display 屬性值。所以 IE 中 input display 默認屬性值並不是 inline-block，只是觸發了 hasLayout 或者 BFC使其具有了 inline-block 類似的特性（可設置寬高）。webkit 中如果 input type=search，由於默認的 box-sizing 是 border-box，對其設置寬高和其他瀏覽器表現出來也是有差異的，所以有時候我們會重置為：
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield;}
對於@李振洲 的答案無疑是不科學的，沒有理論依據。W3C 的具體規範我就不引用了，可以自己去看看。
1、input元素是inline元素
&
&
3、所以，可不可以設置width或者height以及padding、margin等樣式與這個元素是不是inline元素沒有關係。Style sheets provide the means to
specify the rendering of arbitrary elements, including whether an element is
rendered as block or inline. In some cases, such as an inline style for list
elements, this may be appropriate, but generally speaking, authors are
discouraged from overriding the conventional interpretation of HTML elements in
this way.
7.5.3Block-level and inline
elementsCertain HTML elements that may appear in BODY are said to be "block-level" while others are
Content modelGenerally, block-level elements may contain inline elements and other
"inline" (also known as "text level"). The distinction is founded on
several notions:
block-level elements. Generally, inline elements may contain only data and
other inline elements. Inherent in this structural distinction is the idea that
block elements create "larger" structures than inline elements.Formatting
By default, block-level elements are formatted differently than inline
elements. Generally, block-level elements begin on new lines, inline elements
do not. For information about white space, line breaks, and block formatting,
please consult the section on text.DirectionalityFor technical reasons involving the [UNICODE] bidirectional
text algorithm, block-level and inline elements differ in how they inherit
directionality information. For details, see the section on inheritance of text direction.Style sheets provide the means to
specify the rendering of arbitrary elements, including whether an element is
rendered as block or inline. In some cases, such as an inline style for list
elements, this may be appropriate, but generally speaking, authors are
discouraged from overriding the conventional interpretation of HTML elements in
this way.The alteration of the traditional presentation idioms for block level and
inline elements also has an impact on the bidirectional text
algorithm. See the section on the
effect of style sheets on bidirectionality for more information.
PS：
為什麼說inline元素在解析DOM時是很重要的概念呢？
因為P元素被定義為只能包含inline元素，所以P元素在未關閉時遇到任意非inline元素時立即關閉。PPS：P是可選結束元素@李振洲 的答案有誤，width 和 height 對非置換 inline 元素不起作用。可參考 http://www.w3.org/TR/CSS21/visudet.html#the-width-property 及 http://www.w3.org/TR/CSS21/visudet.html#the-height-property。
This property does not apply to non-replaced inline elements.
其實，有個概念要理清：HTML 規範本身沒有規定哪些元素是 inline，哪些又是 block（雖然 WHATWG 的參考資料中包含很多元素的典型 CSS 樣式，但僅僅是參考而非規範）。這些概念只有當相應元素應用了 CSS 的 display 屬性以後才有意義（最終的計算值還與 position 和 float 屬性有關）。然而 CSS 規範其實規定了 display 默認值為 inline（http://www.w3.org/TR/CSS21/visuren.html#display-prop），也就是說，如果非要說按規範某個元素應該是 inline 還是 block 的，那答案只能是 inline。
那為何我們最終看到的樣式並非全是 inline 呢？那是因為瀏覽器會有一個默認的 CSS 樣式，將不同元素的 display 區分開來了。CSS 規範並沒有標準化這個默認樣式，所以不同的瀏覽器可能有不同的實現。但也許因為都參考了 CSS 規範給出的默認樣式範例（http://www.w3.org/TR/CSS21/sample.html，僅為參考，並不要求 UA 實現），所以其實是大同小異的。按我的理解，沒有標準化的原因是，因為 UA 眾多，即使都是屏顯類的 UA，根據自己的不同解析度、色彩等參數，都可能有更適合自身的一套設定。
回到這個問題的本身，input 元素能設定 width 的原因就是瀏覽器默認樣式使它成為了 inline-block 元素。IE 下因為觸發了 hasLayout，故也有類似效果（見 @丁小倪 的答案）。
扯得有點遠，只是因為總有人說起這個元素是行內元素，那個元素是塊級元素，其實並不嚴謹。
input的默認stylesheet:display: inline-block;
HTML 5.1: 10. Rendering input各種類型都被默認渲染為inline-block,再請看下面這張圖：
1，input 不是 inline ，而是 inline-block2，inline 不是一定不能設 width 屬性，比如 img
推薦閱讀：
※Web開發中的"路由"是什麼意思？
※前端開發瓶頸？
※CSS中為什麼overflow:hidden能清除浮動(float)的影響？原理是什麼？
※webpack執行機制流程是怎麼樣的?
※前端開發工作遇到瓶頸，不知何去何從？