CSS中外边距塌陷的八种解决方法
发布时间：2023-05-31 17:15:28 作者：|Mark| 
我要评论
我要评论margin-top塌陷是在CSS的盒子模型中出现的一种现象，本文就介绍了CSS中外边距塌陷的八种解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
什么是margin-top塌陷
margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。
满足以下条件就会产生外边距塌陷现象：
1，子元素在父元素里面
2，子元素中有margin-top或者margin-bottom值
解决步骤
直接上代码，我这代码默认是具有外边距塌陷效果的，可以自己解开对应的注释进行调试。
<!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塌陷问题，又不会出现其他附加的未知错误】*/
/*.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：给父元素加浮动【不推荐，可能带来未知的错误】*/
/*float: left;*/
/*解决外边距塌陷的解决代码-5：给父元素设置display：table;*/
/*display: table;*/
/*padding: 0 10px 0 10px;*/
/*解决外边距塌陷的解决代码-6：使用子绝父相*/
/*position: relative;*/
}
#inner {
width: 50px;
height: 50px;
margin-top: 30px;
/*解决外边距塌陷的解决代码-6：使用子绝父相*/
/*position: absolute;*/
/*解决外边距塌陷的解决代码-7：给子元素加浮动【一样不推荐】*/
/*float: left;*/
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="outer" class="clearfix">
<div id="inner">
内部
</div>
</div>
</body>
</html>
到此这篇关于CSS中外边距塌陷的八种解决方法的文章就介绍到这了,更多相关CSS 外边距塌陷内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
- 这篇文章主要介绍了CSS中如何解决外边距塌陷问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2020-05-11
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。本文介绍了几种用法，具有一定的参考价值，感兴趣的可以了解一下2021-07-01
最新评论