margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。
满足以下条件就会产生外边距塌陷现象：
1，子元素在父元素里面
2，子元素中有margin-top或者margin-bottom值
解决步骤
直接上代码，我这代码默认是具有外边距塌陷效果的，可以自己解开对应的注释进行调试。
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!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> |
