垂直外邊距合併問題

2021-08-16 00:10:07 字數 340 閱讀 6098

簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。實際工作中,垂直外邊距合併問題常見於第乙個子元素的margin-top會頂開父元素與父元素相鄰元素的間距,而且只在標準瀏覽器下(firffox、chrome、opera、sarfi)產生問題,ie下反而表現良好。

解決外邊距合併的方法:

1.當發生外邊距合併的兩個元素為父子關係時,給父元素新增border或者設定overflow:hidden都可解決合併問題。

2.當發生外邊距合併的兩個元素為兄弟關係時,給元素設定浮動float或者position:absolute都可解決合併問題。

垂直外邊距合併問題

別被上面這個名詞給嚇倒了,簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。你可以檢視w3shool css外邊距合併了解這個基本知識。實際工作中,垂直外邊距合併問題常見於第乙個子元素的margin top會頂開父...

CSS學習之垂直外邊距合併問題

概念 外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距,合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者 注意 只有普通文件流中塊級元素 的垂直外邊距才會發生外邊距合併。行內框 浮動框或絕對定位之間的外邊距不會合併。當乙個元素包含在另乙個元素中時 假設沒有內邊距或邊框把外邊...

垂直外邊距重疊問題

當兩個盒子 兄弟元素 處於垂直狀態時,相鄰兩個外邊距不是相加,而是取最大值 當兩個元素是父子關係時,子元素的外邊距 父元素的外邊距 會傳遞給對方 解決方法1 使用文字破壞外邊距相鄰 破壞相鄰狀態 缺點 需要增加html結構 解決方法2 使用border破壞外邊距相鄰 缺點 需要維持可見框大小 解決方...