block vs. inline
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>
Last updated