CSS 盒子模型 邊距合併

2021-09-20 08:28:17 字數 1247 閱讀 5322

css外邊距合併，只有上外邊距和下外邊距才會觸發外邊距合併，左外邊距和右外邊距不會。

源**：



div1


div2
執行效果如下： div1和div2 根據盒子模型的計算規則，div1下邊距100px和div2上邊距100px，理論應該是200px。實際css規則是合併的，因此div1和div2 之間的距離為100px;如果div1的下邊距和div2的上邊距，邊距值不一樣，那麼以最大的邊距為最終取值。

image.png

源**：



div2
執行結果： div2是div1的子元素，完全安裝盒子模型，div2應當距離瀏覽器頂部100px+父元素100px =200px。因為上下邊距合併，所以div2距離頂部100px；由於左右邊距不合併，所以div2距離瀏覽器左邊的距離是200px。

image.png

源**：
遠行結果：**本意，header固定在瀏覽器頂部，當給logo的div新增上乙個margin-top，header距離瀏覽器頂部由於父子元素合併所以出現了這個問題。

穿透可以使用overflow:hidden,觸發bfc模型解決這個問題，有專門章節介紹bfc模型。

在父元素中，插入乙個高度、寬度都是0px的隱藏元素.
與插入元素的思路一致，使用偽元素。
源**：
執行結果： div2 理論佔據150px=上邊距+下邊距，實際占用了100px。因為空元素上下邊距合併。如果div2的內容新增文字，顯示效果將會有巨大差異。

image.png



margin-right100px


margin-left100px


200(div11寬度)+1px(div11右邊框)+100px(div11右邊距)+


200(div12寬度)+1px(div12左邊框)+100px(div12左邊距)
執行效果：

image.png

css盒子模型 邊框邊距

border style dashed 邊框線為虛線 border style solid 邊框線為實線 例 box shadow 10px 10px 10px pink box shadow 水平 垂直 模糊度 顏色 盒子陰影的引數 1 水平 2 垂直 3 模糊度 4 陰影尺寸 5 陰影顏色 6 ...

CSS基礎 17CSS盒子模型 外邊距合併

html class div01 apicloud是一家移動應用開發者平台，api除錯及用量分析 同時提供推送 雲修復 大資料分析等服務。apicloud由 雲api 和 端api 兩部分組成，可以幫助開發者快速實現移動應用的開發 測試 發布 管理和運營的全生命週期管理。柚子 北京 科技 旗下產品。...

CSS盒子模型之外邊距

外邊距 不會影響盒子的大小,但會影響盒子的位置 margin top 上邊距,設定乙個正值,元素會向下移動 margin left 左邊距,設定乙個正值,元素會向右移動 margin right 右邊距,設定乙個正值,下面的元素會向右移動 margin bottom 下邊距,設定乙個正值,下面的元素...