HTML的塊元素和內聯元素都有盒模型，區別是塊元素的內外邊距（margin和padding）可以自定義設定，但內聯元素不可

元素的盒模型圖如下：

外邊距為margin，邊框為border，內邊距為padding

因此元素總長度為margin-left + border-width + padding-left + content文字長度 + padding-right + border-width + margin-right

元素總高度為margin-top + border-width + padding-top + content文字高度 + padding-bottom + border-width + margin-bottom

內邊距（padding），邊框（border），外邊距（margin）都是可選的，不一定有。所謂沒有無非就是0px，並非指元素沒有了內外邊距或邊框的概念。

另外內外邊距是透明的且只能指定空間距離，不能指定顏色和額外的裝飾。

知道了盒模型後再來看看邊距摺疊：

HTML中並排放置內聯元素時，會將外邊距相加。如左元素margin為10px，右元素margin為20px，則兩個元素間距30px。如下圖：

HTML中上下放置塊元素時，會將外邊距摺疊，以最大外邊距為準。如上元素margin為10px，下元素margin為20px，則兩元素間距20px。如下圖：

有時候改CSS的內外邊距時，發現改A元素的邊距頁面沒反應，改B元素的邊距後頁面就有反應了。現在明白是怎麼回事了吧 ^_^