1-12. CSS 範例再練習 (依需求挑選學習)

測試：以下綠色區域只是 <p> 段落區塊，除了背景顏色只設定「margin: 20px」。
結果：段落元素區塊沒有浮動，margin是彼此的距離。

段落文字區域段落文字區域段落文字區域段落文字區域段落文字區域

段落文字區域段落文字區域段落文字區域段落文字區域段落文字區域

段落文字區域段落文字區域段落文字區域段落文字區域段落文字區域

---

測試：以下淡粉紅色區域只是 <div> 區塊，除了背景顏色只設定「overflow: hidden」，
粉紅色區域是 <div> 區塊，設定「height: 100px; width: 23%; margin: 1%; float: left;」。
結果：內層區塊設定浮動，margin是區塊元素強佔的外邊界。

---

測試：以下淡藍色區域只是 <header> 區塊，除了背景顏色沒有任何設定，
深藍色區域是 <div> 區塊，除了顏色只設定「margin: 50px;」
結果：左右部份沒有問題，但是上下部份好像怪怪的？
內層區塊的 margin 與外層區塊的 margin 似乎產生了合併現象，
感覺上好像是外層區塊將 margin 搶去做了？

外圍淡藍色區域是 <header> 區塊，內層深藍色區塊是 <div> 區塊

參考：W3C官網原文說明，這是 margin 的 Collapsing 狀況,
margin 的 Collapsing 狀況只有在沒有浮動的上下之間才會產生, 浮動時不會, 左右之間也不會。
當同一層第一個子元素設定 margin-top 時，會與上一層(父層)的 margin 區合併。
當同一層最後一個子元素設定 margin-bottom 時，會與上一層(父層)的 margin 區合併。