之前被朋友敲碗，
叫我寫一篇解釋 inline 跟 block，
今天就來講一下他們好了，
雖然我前面的 CSS 筆記有稍微講過了，
但就想說拉一些想要獨立講的內容出來寫，
同時也會搭配一些例子，這樣可能比較好理解。

先來講一下常見的 block 有哪些:

• h1 - h6
• p
• section
• article
• header
• footer
• form

常見的 inline:

• a
• span
• input
• label
• button
• img

當然還有其他的標籤，我就不一一說了。

那就開始來展示一下差別吧～

block
codepen

從這個範例可以看出來，block 物件可以設定寬高，而且不管他寬高多少，後面的內容都會自動排到他的底下。

inline
codepen

從範例可以看出來，設定寬高對 inline 物件是沒有效果的，
在有設定 padding 的情況下，inline 只有左右會排除彼此的距離，上下是不會被空開的。
margin 的設定左右有效，上下是無效的。

inline-block
codepen

跟上一個一樣的設定，唯一的差別就是多了一行 display: inline-block，可以看出來，設定寬高是有意義的，margin 也是都有效的。
不會像 block 一樣直接佔掉一整行，只要空間足夠，物件是會並排的。
inline-block 是個集合了 inline 跟 block 特性的孩子。

今天就講到這裡啦～
我們明天見。