深入理解margin

2024年3月17日 225次阅读 来源: 喝冬瓜汤的丁小白 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            width: 500px;
            height: 500px;
            background-color: darkgray;
            /*border: 1px solid;*/
            /*padding-top: 1px;*/
            /*margin-left: 10px;*/
            /*margin-top: 150px;*/
        }
        .son{
            width: 100px;
            height:100PX;
        }

        .son1{
            background-color: chartreuse;
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;

        }

        .son2{
            background-color: violet;
            display: inline-block;
            margin-left: 50px;

        }

        .son3{
            background-color:red;
            margin-top: 50px;
            display: inline-block;
            margin-bottom: 10px;
            margin-right: 50px;
        }
        .son4{
            background-color: aqua;
            margin-top: 50px;
            margin-left: 50px;
        }
    </style>

</head>
<body>
<!--margin重叠问题-->

<div class="parent">
    <!--1.同级元素之间重叠-->
    <!--1.1水平方向margin重叠相加-->

    <!--<span class="son1">son11</span>-->
    <!--<span class="son2">son12</span>-->

    <!--1.2垂直方向margin重叠取大值-->

    <!--<div class="son son1">son1</div>-->
    <!--<div class="son son2">son2</div>-->
    <!--<div class="son son3">son3</div>-->
    <!--<div class="son son4">son4</div>-->

    <!--1.3解决垂直方向重叠问题-->
    <!--BFC-->
    <!--float的值不为none-->
    <!--overflow的值不为visible-->
    <!--display的值为inline-block、table-cell、table-caption-->
    <!--position的值为absolute或fixed-->
    　　
    <!--2.父子元素之间重叠-->
    <!--2.1水平方向margin重叠-->
    <!--2.2水平方向margin重叠-->

    <!--<div class="son son4"></div>-->

    <!--2.3解决垂直方向重叠-->
    <!--给父元素添加padding-top值-->
    <!--给父元素添加border值-->
    <!--BFC-->
    <!--3.margin百分比-->
    <!--普通元素的百分比margin：都是相对于父元素的宽度计算的-->
    <!--4.margin无效的情况-->
    <!--inline水平元素的垂直margin无效-->
    <!--display: table-cell的元素margin无效-->
</div>
</body>
</html>```
    原文作者：喝冬瓜汤的丁小白
    原文地址: https://segmentfault.com/a/1190000017809993
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞