【HTML、CSS教學】2. 區塊、行內元素

🚩 區塊、行內元素

區塊元素會自動占滿整個版面、例如標題、div、li、p…等等都屬於區塊元素。行內元素會依照物件內容的大小決定占用的版面，例如a、span…等等都屬於行內元素。

除了標籤預設的元素之外，也可以另外寫CSS來控制他的元素，
display: block; → 區塊元素
display: inline; → 行內元素
display: inline-block; → 行內區塊元素
display: none; → 隱藏元素

🚩 CodePen 範例一

如CodePen範例，區塊元素預設是會占滿整個版面(使用底色來表示)，而行內元素則會依據內容大小而占用相對應大小的版面。

將changeDisplay1、2的CSS註解拿掉時，可以看到原本的區塊元素與行內元素的特性顛倒過來。

區塊元素內是可以設定寬高，行內元素則不行。
而inline-block是具有區塊元素特性的行內元素，也就是他能夠設定寬高，但又可以保留inline依據內容大小(或設定的寬高)占據相對應的版面。

🚩 CodePen 範例二

因此在寫網頁時，會使用div來做排版，而span則是文字內有要做變化時才會使用，如以下CodePen範例：