我們習慣將html中元素分類為行內元素和塊級元素，如下：

·常見塊級元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；

·常見行內元素有：span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等

而他們明顯的區別是：

·塊級元素：會自動換行，在橫向充滿其父元素的內容區域，默認獨占一行的，可修改寬高；

·行內元素：不會自動換行，行內元素左右可以有其他元素，行內元素的寬高大多是auto*auto。；

·注意：行內元素設置寬高無效（但是行內置換元素可以設置寬高，下面有詳細解釋）、設置上下margin無效，設置上下padding類似無效（不影響文檔流排列）

?? <div style="border:1px solid red;width:400px;">設置塊級元素的寬，依舊會自動換行，因為它要獨占一行</div>?? <span style="border:1px solid purple;width:200px;height:25px;">行內元素設置寬高無效</span>?? <span style="border:1px solid blue;margin:20px;">行內元素設置上下的margin無效</span>?? <span style="border:1px solid blue;padding:20px;">行內元素設置上下的padding也無效</span><br>?? <div>塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字</div>

行內元素怎么樣可設置寬高

當然使用display:block;和display：inline-block;樣式可以實現轉換為塊級元素和行內塊級元素（可設置寬高的行內元素），行內元素還可以通過添加float來設置寬高，因為不論什么元素本身是什么，當它浮動時就會生成一個塊級框；

????? <span style="display: inline-block;width:400px;height:60px;border:1px solid blue;">當使用display：inline-block；后，行內元素可以設置寬高</span>????? <span style="display: block;height:60px;border:1px solid purple;">當使用display:block;行內元素轉為塊級元素</span>????? <span style="float: left;width:400px;height:60px ;border:1px solid orangered;">使用float，任何元素自身會生成一個塊級框，這是因為觸發了BFC</span>

但是還有另外一種分類方式：可替換元素和不可替換元素的分類

·替換元素：替換元素根據其標簽和屬性來決定元素的具體顯示內容，<img><input><textarea><select><object>等。替換一般有內在尺寸如img默認的src屬性引用的圖片的寬高，表單元素如input也有默認的尺寸。img和input的寬高可以設定。

· 不可替換元素：即將內容直接表現給用戶端。

·注意：幾乎大部分的替換元素都是行內元素，所以說如input、img、textarea是行內元素但是是可以設置寬高的說法。

?? <button style="width:200px;" >測試按鈕</button>?? <img src="http://www.runoob.com/images/compatible_opera.gif" alt="" style="border:1px solid red; width:30px;height:30px;">

總結

以上是生活随笔為你收集整理的行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。