CSS样式盒子嵌套盒子margin-top属性失效问题

最新推荐文章于 2024-07-14 19:04:14 发布

杨爽的博客

最新推荐文章于 2024-07-14 19:04:14 发布

阅读量860

点赞数 2

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_49519738/article/details/111062053

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在我们写css样式时，当两个盒子嵌套在一起时，内盒子顶部顶着外盒子顶部，如图：

在这里插入图片描述

这时如果给内盒设置了margin-top等属性，内盒和外盒的顶部并不会有间距，而是外盒被顶下来，好像给外盒设置了margin-top属性一样。
给内盒设置margin-top属性，如图：

<style>
* {
    margin: 0;
    padding: 0;
}
.wrap {
    width: 200px;
    height: 200px;
    background-color: red;
}
.wrap .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 50px;
}
</style>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>