淺談塊狀元素和內聯元素之間的區別

html中的標籤元素大體被分成三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。那麼塊狀元素和內聯元素差異是什麼？下面來跟大家介紹一下。

內聯元素

#在html中，、、 、

等標籤是典型的內聯元素。當然塊狀元素也可以透過設定display：inline；顯示為內聯元素，從而使塊級元素具有內聯元素的特徵。

p{
  display:inline;
}
...<p>我要变成内联元素！</p>

內聯元素的特徵：

1、和其他元素在同一行上，不獨佔一行；

2、元素的高度、寬度及頂部底部邊距無法設定；

（ps：內聯元素的頂部底部邊距margin-top及margin-bottom屬性不起作用，而margin-left及margin-right屬性可以起作用。padding屬性top、bottom、left、right也可起作用，但是padding-top屬性最多只能撐到瀏覽器頂部，padding- top高於瀏覽器頂部，元素不會下移。當為行內元素添加背景時可以使用padding,但是背景色會覆蓋周圍元素。）

3、元素的寬度就是元素所包含的圖片或文字的寬度，無法設定；

*：當行內元素之間有「回車」、「tab」、「空格」時就會出現間隙。

     解決方法：寫在一行，中間不要有空格、回車之類的符號。

塊狀元素

在html中

、

、

、

、

和
• 就是塊狀元素。內聯元素可以透過設定display:block；顯示為塊狀元素。

  如：a{display:block;}

  區塊級元素的特徵：

  1、每個區塊狀元素都從新的一​​行開始，並且其後的元素也另起一行（獨佔一行）；

  2、元素的高度、寬度、行高以及頂和底邊距都可設定；

  3、元素寬度在不設定的情況下，佔它本身父容器的100%（和父元素寬度一致）；

  內聯塊狀元素

  內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特徵，代碼display:inline- block就是將元素設定為內嵌塊狀元素。 、標籤就是這種內嵌塊狀標籤。

  內嵌塊狀元素特徵：

  1、和其他元素都在一行上；

  2、元素的高度、寬度、行高以及頂和底邊距都可設定。

  推薦學習：HTML影片教學
  

  #

  以上是淺談塊狀元素和內聯元素之間的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！