區塊元素 block element
display: block
另起一行呈現
預設會盡可能佔滿父元素的寬度（寬度 100%）
可以設定寬、高
- 應避免寫死高度，實際高度應由裡面元素的高度推擠而來
常見的區塊元素標籤
<div>：沒有語意，單純拿來排版的標籤<p>：文字內容不是以文字大小來推出高度，而是以行距
line-height來呈現高度不寫
line-height時就是 1 倍
<h1><h2>...<h6>、<ul> <ol> <li>、<form> <table> <hr>、<address> <menu> <pre>...
行內元素 inline element
display: inline
不會換行
不會佔滿整個版面，同一行內可以有很多個行內元素
比較常用在段落
<p>裡面不能設定寬(width)、高(height)，寬高由內容撐起
- 如果要設定寬、高，須透過 CSS 改成區塊元素：
display: block
- 如果要設定寬、高，須透過 CSS 改成區塊元素：
設定內間距(padding) 時，水平（左右）和垂直（上下）方向皆有效
設定外邊距(margin)時，只有水平（左右）方向的
margin-right、margin-left有效、垂直（上下）方向的margin-top、margin-bottom無效
常見的行內元素標籤
<span>：本身沒有任何語意，屬於排版用的 inline 標籤，用於點綴樣式，通常用來設定一段文字裡面某幾個字的特殊樣式。例如：<p>我想讓<span style="color: green">這幾個字</span>變成綠色</p><b>、<strong>：用於粗體字。<b>取自 bold ，不帶語意，單純讓字體呈現粗體樣式。（通常不建議使用，若單純想要粗體字可以設定 CSS 樣式）<strong>則帶有語意，用粗體字來強調一段內容特別重要。
<i>、<em>：用於斜體字。<i>取自 italic 不帶語意，單純讓字體呈現斜體樣式。<em>取自 emphasize，則帶有語意，用斜體字來強調一段內容特別重要。
<input>、<textarea>、<select><img><a>
<a> 改成 display:block ，方便點擊
img
屬於行內元素(inline element)
屬於空元素(empty element / void element)：元素中沒有內容(HTML content)
屬於自閉合標籤(self-closing tag)：沒有結束標籤(closing tag)
利用屬性
src來指定圖檔位址：<img src="圖片位址">圖片下方都預設會有 3px 的距離
如何清除 img 下方的多餘空白
使用 vertical-allign: middle
img {
vertical-allign: middle;
}
使用 display: block
img {
display: block;
}