margin 三心二意
測試:以下綠色區域只是 <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> 區塊