CSS 外边距

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .loufang{
                width: 150px;
                height: 100px;
                background-color: blue;
                /* float: right; */
                /* margin-top: 50px;
                margin-bottom: 50px;
                margin-left: 50px;
                margin-right: 50px; */
                /* margin-top: 10%;margin-left: 10%; */
                margin: 10px 20px 30px 40px;
            }
        </style>
    </head>
    <body>
        <!-- 
        外边距要素：
            1，外边距方向：top bottom left right
            2，外边距尺寸
        外边距语法：
            语法1：margin-方向: 外边距尺寸;
                使用百分比，参考父级
                可以使用负值
            语法2：margin: 上 右 下 左;
            语法3：margin: 上 左右 下;
            语法4: margin: 上下 左右;
            语法5：margin: 一个值，四个方向一样;
         -->    
        <div style="background-color: red;height: 50px;"></div>
        <div class="loufang"></div>
        <div style="background-color: black;height: 50px;<!-- clear: right; -->"></div>
    </body>
</html>