CSS中外邊距塌陷的八種解決方法
發(fā)布時(shí)間：2023-05-31 17:15:28 作者：|Mark| 
我要評(píng)論
我要評(píng)論margin-top塌陷是在CSS的盒子模型中出現(xiàn)的一種現(xiàn)象，本文就介紹了CSS中外邊距塌陷的八種解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
什么是margin-top塌陷
margin-top塌陷是在CSS的盒子模型中出現(xiàn)的一種現(xiàn)象，描述的是當(dāng)父元素包裹著一個(gè)子元素的時(shí)候，當(dāng)給子元素設(shè)置margin-top屬性時(shí)，此時(shí)只是想讓子元素的邊框距離父元素邊框有一段距離，而卻出現(xiàn)了父元素的頂端距離body這個(gè)邊框出現(xiàn)了位移，這就是margin-top塌陷的現(xiàn)象。
滿(mǎn)足以下條件就會(huì)產(chǎn)生外邊距塌陷現(xiàn)象：
1，子元素在父元素里面
2，子元素中有margin-top或者margin-bottom值
解決步驟
直接上代碼，我這代碼默認(rèn)是具有外邊距塌陷效果的，可以自己解開(kāi)對(duì)應(yīng)的注釋進(jìn)行調(diào)試。
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
/*解決外邊距塌陷的解決代碼-8：給【推薦：既能解決margin-top塌陷問(wèn)題，又不會(huì)出現(xiàn)其他附加的未知錯(cuò)誤】*/
/*.clearfix::before {
content: '';
display: table;
}*/
#outer {
width: 100px;
height: 100px;
background-color: pink;
/*解決外邊距塌陷的解決代碼-1：給父元素加邊框*/
/*border: 1px solid #fff;*/
/*解決外邊距塌陷的解決代碼-2：給父元素加溢出css*/
/*overflow: hidden;*/
/*解決外邊距塌陷的解決代碼-3：給父元素加固定定位*/
/*position:fixed;*/
/*解決外邊距塌陷的解決代碼-4：給父元素加浮動(dòng)【不推薦，可能帶來(lái)未知的錯(cuò)誤】*/
/*float: left;*/
/*解決外邊距塌陷的解決代碼-5：給父元素設(shè)置display：table;*/
/*display: table;*/
/*padding: 0 10px 0 10px;*/
/*解決外邊距塌陷的解決代碼-6：使用子絕父相*/
/*position: relative;*/
}
#inner {
width: 50px;
height: 50px;
margin-top: 30px;
/*解決外邊距塌陷的解決代碼-6：使用子絕父相*/
/*position: absolute;*/
/*解決外邊距塌陷的解決代碼-7：給子元素加浮動(dòng)【一樣不推薦】*/
/*float: left;*/
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="outer" class="clearfix">
<div id="inner">
內(nèi)部
</div>
</div>
</body>
</html>
到此這篇關(guān)于CSS中外邊距塌陷的八種解決方法的文章就介紹到這了,更多相關(guān)CSS 外邊距塌陷內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS中如何解決外邊距塌陷問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-05-11
詳解overflow:hidden的作用(溢出隱藏、清除浮動(dòng)、解決外邊距塌陷)
overflow:hidden是當(dāng)元素內(nèi)的內(nèi)容溢出的時(shí)候使它隱藏溢出的部分，即超出部分隱藏。本文介紹了幾種用法，具有一定的參考價(jià)值，感興趣的可以了解一下2021-07-01