首页 > 建站教程 > 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;
TAGS: 内部  容器  margin-top  影响  到  外部  我爱  模板