CSS display顯示分別為block、 inline、 inline-block的三種元素

佔東紅發表於2020-11-03

塊級元素

塊級元素最顯著的特點是預設佔用一整行
就算設定快級元素的寬度小於螢幕的寬度,但是該塊級元素仍然佔用那一整行,快級元素始終佔用一整行,除非浮動塊級元素,後面的元素才會漂上來。

如果需要佔滿所有可用的空間,則選擇使用塊級元素

內聯塊級元素

如果不想獨佔一行,並且需要設計他的大小,則可以使用內聯塊級元素
在使用塊級元素的方便之時又希望該元素不用換行,則使用內聯塊級元素!

內聯塊級元素擁有塊級元素的上下左右的內外邊距的方便,同時允許不換行!

內聯元素

如果不需要獨佔一行,也不需要設計它的上下外邊距,則使用內聯元素
inline內聯元素僅支援左右的外邊距,不支援上下的外邊距,支援上下左右的內邊距。

相關文章