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元素的邊距後頁面就有反應了。現在明白是怎麼回事了吧 ^_^
CSS 盒子模型 邊距合併
css外邊距合併，只有上外邊距和下外邊距才會觸發外邊距合併，左外邊距和右外邊距不會。源 div1 div2 執行效果如下 div1和div2 根據盒子模型的計算規則，div1下邊距100px和div2上邊距100px，理論應該是200px。實際css規則是合併的，因此div1和div2 之間的距離為...
css盒子模型 邊框邊距
border style dashed 邊框線為虛線 border style solid 邊框線為實線 例 box shadow 10px 10px 10px pink box shadow 水平 垂直 模糊度 顏色 盒子陰影的引數 1 水平 2 垂直 3 模糊度 4 陰影尺寸 5 陰影顏色 6 ...
盒子模型 外邊距
外邊距 margin 外邊距不會影響盒子可見框的大小 但是外邊距會影響盒子的位置 一共有四個方向的外邊距 margin top 上外邊距，設定乙個正值，元素會向下移動 margin right 預設情況下設定margin right不會產生任何效果 margin bottom 下外邊距，設定乙個正值...