解决块状元素垂直外边距的塌陷问题

解决块状元素垂直外边距的塌陷问题

  • 我想要的图形

  • 实际上得到的图形

  • 解决方案

    1. 给定父元素边框
    2. 给父元素添加内边距
    3. 使用overflow:hidden

  • 代码如下：

    <style type="text/css">
    .father {
        width: 200px;
        height: 200px;
        background-color: #0066CC;
        margin-top: 200px;
        /* border: 1px solid transparent; */
        /* padding: 1px; */
        /* overflow: hidden; */
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: #9B0909;
        margin-top: 50px;
    }
</style>

    <body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
posted @   巫小诗  阅读(226)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
SQL AI 助手