行內元素與區塊級元素有什麼區別

區塊級元素

1、總是從新行開始

2、高度、行高、外邊距以及內邊距都可以控制

3、寬度預設是瀏覽器的100%

4、可以容納內聯元素以及其他區塊元素

行內元素

1、和相鄰元素在一行上

2、高、寬無效，但是水平方向的padding和margin可以設置，垂直方向無效

3、預設寬度就是它本身內容的寬度

4、行內元素只能容納文字或其他行內元素（a除外）

（影片教學建議：css影片教學）

注意：

1、只有文字才能組成段落，因此p裡面不能放置區塊元素，同理還有這些標籤h1 -h6，dt等，它們都是文字區塊級標籤，裡面不能放置其他區塊級元素

2、連結裡面不能再放置連結

區塊級元素和行內元素的差異

區塊級元素的特徵：

1、總是從新行開始

2、高度、行高、外邊距以及內邊距都可以控制

3、寬度預設是瀏覽器的100%

4、可以容納內聯元素以及其他區塊元素

行內元素的特徵：

1、和相鄰行內元素在一行上

2、高、寬無效，但是水平方向的padding和margin可以設定，垂直方向無效

3、預設寬度就是它本身內容的寬度

4、行內元素只能容納文字或其他行內元素（a除外）

行內區塊標籤inline-block

在行內元素中有幾個特殊的標籤--、、

，可以對他們設定寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。

特點：

1、和相鄰行內元素（行內部）在一行上，但是之間會有空白間隙；

2 、預設寬度是它本身內容的寬度

3、高度、行高、外邊距以及內邊距都可以控制

標籤顯示模式轉換display

區塊轉行內：display:inline;

行內轉區塊：display:block;

區塊、行內元素轉換為行內區塊：display:inline-block;

推薦教學：css快速入門

#

以上是行內元素與區塊級元素有什麼區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！