HTML元素盒子模型及邊距摺疊
阿新 • • 發佈:2019-01-28
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元素的邊距後頁面就有反應了。現在明白是怎麼回事了吧 ^_^