CSS等高布局（margin与padding抵消）_css 怎么把子盒子继承父盒子的padding去掉-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45678090/article/details/107292732

等高布局概念

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。下面将介绍的是：伪等高（margin与padding）真等高（）

margin与padding实现伪等高

1、使用正值的padding-bottom把元素撑开；
2、用负值的margin-bottom把两个元素的下边界收回原来的位置。
3、父元素用overflow：hidden；把超出部分隐藏。

<style>
        #fu{
            border: 10px solid #000000;
            overflow:hidden;
        }
        #zi_l{
            width: 100px;
            background: green;
            margin-bottom: -2000px;
            padding-bottom: 2000px;
            border-bottom: 4px solid #fff;
            float: left;
        }
        #zi_r{
            width: 100px;
            background: blue;
            margin-bottom: -2000px;
            padding-bottom: 2000px;
            float: right;
        }
    </style>
    <body>
    <div id="fu">
        <div id="box1">
            <div>???</div>
            <div>???</div>
            <div>???</div>
            <div>???</div>
            <div>???</div>
        </div>
        <div id="box2">
            <p>123</p>
            <p>123</p>
            <p>123</p>
        </div>
    </div>
</body>