CSS div的三种结构水平垂直包含margin的计算

  <style>
        * {
            margin: 0;
            padding: 0;
            color: #fff;
            font-size：12px;
        }

        body {
            background: grey;
        }

        body>div {
             550px;
            height: 120px;
            background: blue;
            margin-top: 5px;
        }

        .parent1:after {
            clear: both;
             0;
            height: 0;
            content: '';
            display: block;
            visibility: hidden;
        }

        .parent {
            position: relative;
        }

        .parent>div {

             100px;
            height: 30px;

            background: orange;
        }

        .parent1>div {
            float: left;
        }

        .parent1 span {
             40px;
            height: 60px;
            background: red;
            position: absolute;
            left: 120px;
            top: 50px;
        }

        .parent1 .child {
            margin: 10px 20px;
        }

        .parent2 .child {
            margin: 10px 20px;
        }

        .parent2 span {
             100px;
            height: 10px;
            background: red;
            position: absolute;
            left: 120px;
            top: 30px;
            text-align: right;
        }
       .parent3 .child1 {
            margin-bottom:10px;
        }
               .parent3 .child2 {
            margin-top:20px;
        }

        .parent3 span {
             100px;
            height: 20px;
            background: red;
            position: absolute;
            left: 100px;
            top: 30px;
            text-align: right;
        }
        .parent4 {
            padding: 10px;
        }

        .parent4 .child {
            margin: 10px;
        }

        .parent4 span {

             20px;
            height: 60px;
            background: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="parent parent1">
        <div class="child">margin-left:10px;</div>
        <div class="child">margin-rihgt:10px;</div>
        <h3>水平结构</h3>
        <span>宽度40px</span>
    </div>
    <div class="parent parent2">
        <div class="child">margin-bottom:10px;</div>
        <div class="child">margin-top:10px;</div>
        <h3>垂直结构</h3>
        <span>高度10px</span>
    </div>
    <div class="parent parent3">
        <div class="child child1">margin-bottom:10px;</div>
        <div class="child child2">margin-top:20px;</div>
        <h3>垂直结构</h3>
        <span>高度20px</span>
    </div>
    <div class="parent parent4">
        <div class="child">包含结构</div>
     <h3>  包含结构 父元素padding-rihgt:10px;子元素margin-left:10px;</h3>
        <span>红色20px</span>
    </div>


</body>

</html>

结论:

1：水平结构第一个盒子的右边距等于左边盒子的margin-right +右边盒子的margin-left;【相加】

2：垂直结构第一个盒子的下边距等于上边盒子的margin-bottom和下边盒子的margin-top比较一下，【取最大值】

3：包含结构子元素的margin-left 等于父元素的padding-rihgt +子元素的margin-left 【margin+padding相加】

相关阅读:
解决Xcode8打印了nw_socket_handle_socket_event Event mask
调用系统框架使用设备系统语言的设置，相册相机设置为中文
 ios开发之设置多种文字颜色/背景色/文字下划线/行间距 NSString
IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法
 UITableView设置cell的separator 分割线
 iOS用户点击推送消息进入应用后自动跳转到对应的ViewController
随感
 JS获取当前网页大小以及屏幕分辨率等
 js将秒转换为分:秒函数
 css实现强制不换行/自动换行/强制换行
原文地址：https://www.cnblogs.com/xingkongly/p/7531330.html