詳解css邊距重疊的幾種解決方案

2022-09-25 22:45:16 字數 612 閱讀 5049

今天整理了一下用css防止邊距重疊的幾種方法

先假設一組dom結構

www.cppcns.coment">

程式設計客棧;

通常情況下,如果給子元素設定margin,就會產生這個屬性對父元素也產生了同樣的效果,然而

這其實不是我們想要的結果,我們只想對子元素設定margin,那麼現在我們應該怎麼做呢?

(1) 給父元素設定邊框

.parent

.child

(2)給父元素新增padding

.parent

.child

(3)在子元素上方加乙個有寬高的兄弟元素,記住是有寬高的。

(4)給父元素設定 overflow: hidden; 屬性

.parent kyxwvcdb

.child

(5)給子元素設定 display: inline-block;(如果子元素是行內元素或者行內塊級元素則不會產生邊距重疊的問題)

.parent

.child

(6)使子元素脫離文件流這個實現的方法有很多,浮動,絕對定位等,這裡我就不做具體的解釋了。

本文標題: 詳解css邊距重疊的幾種解決方案

本文位址:

BFC邊距重疊解決方案

bfc 定義 bfc block formatting context 直譯為 塊級格式化上下文 它是乙個獨立的渲染區域,只有block level box參與,它規定了內部的block level box如何布局,並且與這個區域外部毫不相干。bfc布局規則 原理 內部的box會在垂直方向,乙個接乙...

詳解css盒模型與外邊距重疊

之前寫了一篇關於如何解決css的外邊距重疊問題,可是後來發現,我有些本末倒置了,對於乙個問題的正確的處理流程就應該是先發現問題,分析問題,解決問題,所以我在這篇文章中就對下css的盒模型,什麼是外邊距重疊,為什麼會發生外邊距重疊,以及怎樣計算外邊距重疊一一進行解讀,旨在透過現象看本質,達到掌握的目的...

詳解css盒模型與外邊距重疊

之前寫了一篇關於如何解決css的外邊距重疊問題,可是後來發現,我有些本末倒置了,對於乙個問題的正確的處理流程就應該是先發現問題,分析問題,解決問題,所以我在這篇文章中就對下css的盒模型,什麼是外邊距重疊,為什麼會發生外邊距重疊,以及怎樣計算外邊距重疊一一進行解讀,旨在透過現象看本質,達到掌握的目的...