margin边距计算规则
    Margin边距是指视觉上控制元素周围空白区域大小的属性，系统根据margin属性的值，在元素外围自动在页面上留出一定的空白。在页面设计过程中，需要掌握margin属性的计算规则。
    一、分析margin边距
    1.外边距（margin）包括上外边距（margin-top）、下外边距（margin-bottom）、左外边距（margin-left）和右外边距（margin-right）。
    2.外边距是与元素的周围元素之间的距离，因此它实际上是在周围的元素的边框之外。
    3.没有定义高度或长度的块元素默认会占据父元素的全部宽度，高度自适应，当加上margin时，会在父元素的外部产生一段空白。
    二、margin边距的计算规则
    1.相邻块元素的margin会合并。
    当两个相邻的块元素的margin相遇时，它们将合并成一个margin。合并后的margin的高度等于两个margin中高度较大的一个。
    2.Margin取最大值。
    当一个块元素的margin被设置为负值时，将使用较大的margin值而非两者相加。例如，-20px和-30px之间取-30px。
    3.对于嵌套的元素，外部margin影响内部margin。
    例如：
    <html>
    <head>
        <style>
        .outer {padding: 10px; margin: 20px;}
        .inner {padding: 10px; margin: 30px;}
        </style>
    </head>
    <body>
        <div class="outer">
margin属性怎么用
            <div class="inner">Content</div>
        </div>
    </body>
</html>
    外部div的margin为20px，内部div的margin为30px。最终呈现效果为外部div为50px高度的一个框，内部div在这个框内部，从外部div的框边缘开始，向内部30px的距离才有内容。
    4.Margin不以容器的边界为基准。
    容器不会考虑子元素的margin高度。例如：
    <html>
    <body>
        <div >
            <p >Text</p>
        </div>
    </body>
</html>
    尽管p元素的margin为20px，但它不会在容器的顶部增加10px的margin，而是覆盖掉容器顶部10px的margin。
    通过了解margin属性的计算规则，设计师可以更好地控制页面的布局，使其看起来更具有层次感和美观性。