Inline element VS. Block element

inline element

容器會以實際容器所存的內容為主且不會特別佔據沒顯示內容的區塊而將容器特別獨立開來,以此特性會讓該容器能夠與其他容器在同一行內呈現,而inline element就是由此而得名。

特點:

  1. 容器的範圍會貼齊實際內容,也就是說容器內並不會出現額外的空白
  2. 容器會以內容為主,並不能夠隨意調整高度和寬度
  3. 容器在網頁上的呈現並不會在新的一行呈現,會貼齊上個容器後

block element

該容器會以特定的高寬度來製作以及使用足夠大的margin來與其他容器隔開來,這並不像inline那樣會貼齊內容製作,所以容器內部本身會夾雜著除了主要內容以外的空白,且本身會用margin來隔開其他容器,所以會呈現上會是新的一行來呈現,並不會與其他容器在同一行呈現。

特點:

  1. 容器的範圍並不會貼齊實際內容,也就是說容器內很有可能會出現額外的空白
  2. 容器可以隨意調整高度和寬度
  3. 容器在網頁上的呈現會在新的一行出現,並不會貼齊上個容器後

reference

  1. https://www.geeksforgeeks.org/difference-between-block-elements-and-inline-elements/
  2. https://www.freecodecamp.org/news/inline-elements-and-block-elements-in-html-explained/

本Blog上的所有文章除特别聲明外,均採用 CC BY-SA 4.0 協議 ,轉載請註明出處!