block vs. inline

• 📗 CSS inline vs. inline-block vs. block

block

• width: 100% by default

• height: determined by content.

• 可設定 width, height

• 排版時會佔據整行(由上往下排)

• inline

• 不能設定 width, height。(width 由 content 決定) ⭐️

• 排版時由左至右。

• 不能設定 margin-top, margin-bottom。⭐️

• inline-block

• 排版像 inline 元素由左往右排，

• 但可設定 width, height 像 block 元素。

• 內建的 inline-block 元素共五個：img, button, select, input, textarea

block elements

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

inline elements

inline elements can't change width and heigh.

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>