CSS垂直外边距重叠

最新推荐文章于 2023-10-26 23:47:30 发布

丨Q ，Q丨

最新推荐文章于 2023-10-26 23:47:30 发布

阅读量491

点赞数

分类专栏： html+CSS

本文链接：https://blog.csdn.net/qq2071114140/article/details/90669650

版权

html+CSS 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

CSS垂直外边距重叠

一.什么是垂直外边距重叠？

首先，垂直外边距重叠是发生在处于文档流的父子元素；当父元素和子元素的外边距相邻时，如果设置子元素外边距，就会传递到父元素

<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .block1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }
            .block2{
                width: 100px;
                height: 100px;
                background-color: skyblue;

                margin-top: 100px;
            }
        </style>
    </head>

    <body>
        <div class="block1">
            <div class="block2"></div>
        </div>
    </body>
</html>

二.怎么解决?

1.使子元素开启BFC

2.隔离父子元素的外边距

    <body>
        <div class="block1">
            <table></table>
            <div class="block2"></div>
        </div>
    </body>

注意，这里要使用空的table，空的div没用

这样的方法并不是最完美的，通过CSS的伪元素，可以不用在html中添加多余的结构

block1:before{
    display: table;
    content: "";
}

丨Q ，Q丨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS垂直外边距重叠

CSS垂直外边距重叠一.什么是垂直外边距重叠？首先，垂直外边距重叠是发生在处于文档流的父子元素；当父元素和子元素的外边距相邻时，如果设置子元素外边距，就会传递到父元素<html> <head> <meta charset="utf-8" /> <style type="text/css"> ...
复制链接

扫一扫