寵物展會2025年時間表
848
2022-05-30
css中子元素設置margin-top會影響到父元素
demo代碼：
div one
content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
效果
出現問題的地方：
修改content div的margin-top：
.content { width: 100px; height: 100px; background: orange; margin-top: 50px; }
1
2
3
4
5
6
效果
很奇怪，只是修改了content div頂外邊距，為什么會影響到父div呢？
CSS的技術文檔中有這么一段話：、
In this specification,the expression collasing margins means that adjoining margins(no non-empty content,padding or border areas or clearance separate them)of two or more boxes(which may be next to on another or nested)combine to form a single margin。
大意為折疊邊距意味著會鄰接兩個或多個盒元素的沒有非空內容、沒有內邊距、沒有邊區域或用間隙分開它們的外邊距合并成一個外邊距。
以上就是產生這種現象有原因。父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding或者非空內容（如一段文字），就會一層一層地合并父元素的margin-top成一個單獨的margin-top。因此只要給父元素設置個有效的 border或者padding或在子元素前增加一段非空內容（如文字）就可以阻止它去合并父元素的外邊距啦。
解決辦法：
１、在子元素添加非空內容
div one
Ｈello Ｗorld
content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2、父元素增加padding
div one
content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
3、給父元素添加邊區域
div one
content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
4、給父元素設置overflow:hidden，auto、scroll、overlay都可以
.content_outer{ width: 500px; height: 500px; background-color: red; overflow:auto; }
1
2
3
4
5
6
5、父元素或者子元素使用浮動或者絕對定位。
謝謝閱讀！
CSS
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
