构建生信数据库--前端--内元素加margin会顶下外元素的4种解决办法

最新推荐文章于 2024-08-15 18:19:19 发布

林钟石

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量129

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_42287704/article/details/128486044

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

内元素加margin会顶下外元素的4种解决办法

<body style="margin: 0;">
    <div class="div-outer">
        <div class="div-inner"></div>
    </div>
</body>
*********************
>>> style.css
.div-outer {
    width: 300px;
    height: 400px;
    background-color: lightblue;
    /* border-top: 1px; */   第一种
    /* padding-top: 1px; */  第二种
    /* overflow: hidden; */  第三种
}

.div-outer::before {				 第四种，注意是外元素
    content: "";
    display: table;
}

.div-inner {
    width: 100px;
    height: 100px;
    background-color: darkred;
    margin: 20px;
}