前言：
现在小伙伴们对“aspnetmargintop”大概比较关怀，姐妹们都需要学习一些“aspnetmargintop”的相关资讯。那么小编也在网上收集了一些有关“aspnetmargintop””的相关文章，希望小伙伴们能喜欢，同学们快快来了解一下吧！在父子元素中，通过marigin让父元素相对左边及顶部各距离100px,也让子元素相对于父元素左边和顶部各50px。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .father{ width:300px; height:300px; background-color: rgb(219, 68, 101); margin-left: 100px; margin-top: 100px; } .son{ width: 200px; height: 200px; background-color: rgb(56, 248, 207); margin-left: 50px; margin-top: 50px; } body{ padding: 0; margin:0; }</style><body> <div class='father'> <div class='son'></div> </div></body></html>代码中水平方向的距离确实没问题,但是垂直方向设置了子盒子margin 垂直为50px，但实际效果为父盒子向下移动了100px，子盒子未动，该现象称之为margin垂直塌陷。
解决方法：
1.父元素设置overflow：hidden
2.display的值为table-cell或inline-block
3.position为absolute/fixed
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .father{ width:300px; height:300px; background-color: rgb(219, 68, 101); margin-left: 100px; margin-top: 100px; /* 下面这些属性任何一个都可以解决 */ /* overflow: hidden; */ /* position:absolute; */ /* position:fixed; */ /* display:inline-block */ } .son{ width: 200px; height: 200px; background-color: rgb(56, 248, 207); margin-left: 50px; margin-top: 50px; } body{ padding: 0; margin:0; }</style><body> <div class='father'> <div class='son'></div> </div></body></html>效果展示
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #aspnetmargintop
