在Day13 我們已經將瀏覽器預設的CSS樣式給清空了。今天，就是要教大家在排版設計上，有哪些常用的CSS property。
display
在排版上最常用的CSS property就是display，在介紹display之前，必須先讓大家理解HTML又可以分為區塊元素(block element)跟行內元素(inline element)。
區塊元素(block)
常見的區塊元素比如<h1>、<div>、<p>等。
區塊元素的特性：
- 盡可能占滿整個螢幕
- 另起一行來呈現內容
透過以下範例，我們將背景變成黑色以呈現區塊元素占滿整個螢幕的特性。也可以發現每個區塊元素的內容都是從新的一行開始呈現。
行內元素(inline)
常見的行內元素有<a>、<span>等。
行內元素的特性：
- 主要是使用在段落裡面，與內容齊行
- 沒有辦法調整寬、高
透過以下範例，我們將杭內元素背景變成紅色，可以發現行內元素都是跟著段落作呈現。
display的使用
上面簡單的介紹完區塊元素與行內元素後，或許大家心中有個疑問，那就是我有辦法變更元素的預定好的樣式嗎?答案是肯定的。 今天我可以透過CSS的display特性，將標籤更改為區塊元素或行內元素。
透過以下範例，可以看到本來<h1>應該要占滿整個畫面，但因為設定display: inline;使它變成行內元素，因此背景顏色不會占滿整個畫面了。
相反，在超連結<a>的部分，透過display: block;，使其成為區塊元素，因此呈現整個畫面併另起新的一行作呈現。
display除了上述兩個設定方式外，這邊針對我常用的設定做介紹：
| Value | 說明 |
|---|---|
| block | 將元素變更為區塊元素 |
| inline | 將元素變更為行內元素 |
| inline-block | 將元素變更為行內元素，但是可以設定寬、高 |
| flex | 將此元素變為區塊元素的容器，此用法常用於排版，我會在下一篇做更詳細介紹 |
這個網站 列出了display所有的使用方式，大家可以參考。
margin VS padding
margin及padding是兩個很常使用的CSS property，可以用來調整網頁內容的間隔。 以下範例為一個段落，其文字內容
總結
今天主要介紹了CSS Reset，其實有很多CSS Reset的方法，甚至也可以自己去寫CSS Reset。
除了CSS Reset另一個常用的是Normalize CSS。
Normalize CSS主要是會保留一些常見CSS樣式的設定，像<h1>之類的常用的標籤。而不會將全部CSS都清除掉，這部分就沒多做介紹了。
清除預設樣式後，我們就要學習設計排版的小技巧了。