子div 的margin-top不生效

最新推荐文章于 2023-11-17 13:59:43 发布

郝静and静静

最新推荐文章于 2023-11-17 13:59:43 发布

阅读量1.7k

点赞数

分类专栏：前端开发文章标签：布局

本文链接：https://blog.csdn.net/u010705091/article/details/78379843

版权

前端开发专栏收录该内容

57 篇文章 0 订阅

订阅专栏

/*
    当两个容器嵌套时,如果外层容器和内层容器之间**没有别的元素**,ff或chrome会把内层元素的margin-top作用于父元素。
     解决方案一：给父div添加overflow:hidden
     解决方案二：给父div或子div添加padding-top:100px;但是这两种布局有不同之处
     解决方案三：使用浮动来解决，即将子层代码改为：margin-top:200px;float:left
     解决方案四：给父div写个空字符串&nbsp;,此时相当于外层和内层容器之间添加了文本元素
            */
            * {
                margin:0;
                padding:0;
            }

            .father {
                width:300px;
                height:300px;
                background-color:green;
                padding-top:100px;
                /*overflow:hidden;*/
            }

            .son {
                width:100px;
                height:100px;
                background-color:red;
            }

<div class="father">
    <div class="son">
      </div>
</div>