首页 > 建站教程 > Div+Css >  内部容器margin-top影响到外部容器,子容器margin-top影响父容器正文

内部容器margin-top影响到外部容器,子容器margin-top影响父容器

我爱模板网在做一个站的时候,向给li标签中间有间隔,由于ul有背景色,所以不能用padding-top,只能用margin-top,这样才能看到ul。但是,却发现有问题——ul掉下来了。布局和css代码如下:
<style>
*{margin:0px; padding:0px;}
div{background:red; width:200px; height:200px;}
ul{background:black; width:200px;}
ul li{background:#a8102b; margin-top:10px; color:#fff;}
</style>
<div>
我爱模板网
</div>
<ul>
    <li>我是li标签</li>
    <li>我是li标签</li>
    <li>我是li标签</li>
    <li>我是li标签</li>
    <li>我是li标签</li>
</ul>
效果图如下:
css教程
css教程
按理说,li的margin-top是li与li之间以及li与ul之间的间距,为什么ul会掉下来呢?经过百度,终于知道怎么解决了,因为ul的padding给重置成0了,加个padding-top:0.1px,即可完美解决,代码如下:
<style>
*{margin:0px; padding:0px;}
div{background:red; width:200px; height:200px;}
ul{background:black; width:200px; padding-top:0.1px}
ul li{background:#a8102b; margin-top:10px; color:#fff;}
</style>
<div>
div容器
</div>
<ul>
    <li>我是li标签</li>
    <li>我是li标签</li>
    <li>我是li标签</li>
    <li>我是li标签</li>
    <li>我是li标签</li>
</ul>
效果图如下:
css教程
css教程
运行下面的代码,自己调试看看:


提示:您可以先修改部分代码再运行


除此之外,还有一种解决方法,给父容器加上下面的代码也可以解决:
border-top:1px solid transparent;