CSS的margin-top屬性
如果是用在block element的話
則margin-top的設定會被上一層的block element搶走
所以如果現在有兩層div
並在內層的div設定margin-top的話 則這個margin-top會被外層的div取來用
於是網頁的呈顯就不如預期
這在stackoverflow上都有人在討論：
https://goo.gl/6FXZf7
上面的說法是因為margin collapsing的緣故
我看了好幾個網頁的說明 都是這樣說
但我不懂的是 margin collapsing指的是
margin-bottom跟margin-top相遇時 margin-top會被忽略
這跟margin-top在沒有border的限制下 會被外層的block element搶走
到底有什麼關係
是因為什麼原因 才會有「外層元素可以搶內層元素屬性」這種規範
這樣設計規範的好處是什麼
而這個問題也可以改成：
為什麼block element的margin-top會被搶走 但inline-block元素卻不會
我google到的說法 都是只有講替代的語法
例如將block element改成是inline-block element
或是將margin-top改成padding-top
卻沒有說明這種規範的原因 好處
但我覺得知道這個問題的原因 才能知道這個規範在實際開發時可以用在甚麼地方
不然只是將block element改成是inline-block element
或是將margin-top改成padding-top
也只是在背語法