CSS 注意事項

之前發生了一件迷樣的事件, 今天才搞懂原因 廢話不多說, 你認為下面的HTML 顯示出來的兩個div 總高度是?

我以前以為是: (100 + 5*2) * 2 = 220px 結果發現CSS 有個特性 就是重疊在一起的margin 會自動merge 也就是說第一個div 的margin-bottom 和第二個div 的margin-top 並不會是疊合( 5 + 5 = 10 ) 而就僅只是 5 所以兩個div 的高度總合就只有: 100 + 5 + 5 + 100 + 5 = 215px 消失了迷樣的5px, 之前怎麼想都想不透的... 另外, margin 的合併並不只限於兩個margin 相等的情況 例如說, 假如第一個div的margin-bottom 是5px, 第二個div的margin-top 是10px 則兩個margin 造成的淨效果是10px, 不會是10+5 = 15px 另外, margin 是不算在element "裡面"的 也就是說, background-color 所造成的塗色範圍並不包含margin 的界線 又, margin 和 padding 是不會像上述那樣merge的, 他們會疊加, 所以以上述的case來說的話, 假設一個margin-bottom 是5, 另一個padding-top 是5, 那麼總共會造成 5+5 = 10 的效果