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等

• 塊級元素：塊級元素是指本身屬性為display:block;的元素。
  獨佔一行，每一個塊級元素都會從新的一行重新開始，從上到下排布
  可以直接控制寬度、高度以及盒子模型的相關css屬性
  在不設定寬度的情況下，塊級元素的寬度是它父級元素內容的寬度
  在不設定高度的情況下，塊級元素的高度是它本身內容的高度
• 內聯元素：內聯元素是指本身屬性為display:inline;的元素
  和其他內聯元素從左到右在一行顯示
  不能直接控制寬度、高度以及盒子模型的相關css屬性，但是直接設定內外邊距的左右值是可以的
  內聯元素的寬高是由本身內容的大小決定（文字、圖片等）
  內聯元素只能容納文字或者其他內聯元素（此處請注意，不要在內聯元素中巢狀塊級元素）
  注意：內聯元素設定寬高無效（但是行內建換元素可以設定寬高，下面有詳細解釋）、設定margin上下無效，設定padding上下類似無效（不影響文件流排列)

測試

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

當我們使用內邊距時，只有左右方向有效；當我們設定四個方向的內邊距時，對於該行內元素，確實顯示出效果，但是豎直方向的內邊距只有效果，對其他元素無任何影響。
因此，行內元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是無效；不過要注意一點，對於豎直方向的內邊距該行內元素的內容範圍是增大了，不過只是表象，對周圍元素無任何影響。(由圖中也可看出)

可替換元素和不可替換元素的分類

• 替換元素：替換元素根據其標籤和屬性來決定元素的具體顯示內容，<img><input><textarea><select><object>等。替換一般有內在尺寸如img預設的src屬性引用的圖片的寬高，表單元素如input也有預設的尺寸。img和input的寬高可以設定。
• 不可替換元素：即將內容直接表現給使用者端。
  注意：幾乎大部分的替換元素都是行內元素，所以說如input、img、textarea是行內元素但是是可以設定寬高的說法。
  img屬於行內替換元素。height/width/padding/margin均可用。效果等於塊元素。

行內元素怎麼樣可設定寬高

1.display:block;
2 .display:inline-block;
3.float(觸發BFC,自身元素變成塊級元素)