外边距

最新推荐文章于 2023-06-06 09:17:52 发布

原创最新推荐文章于 2023-06-06 09:17:52 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

web基础专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了CSS中Margin属性的应用，详细解释了Margin如何影响网页布局。通过具体实例，展示了Margin的不同取值方式，包括单边、双边、三边及四边的设置，帮助读者更好地理解和掌握Margin属性在网页设计中的运用。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .box01, .box02{

            width: 200px;
            height: 200px;
            border: 5px solid black;
        }

        .box01{
            /*margin 外边距 盒子与其他元素的距离*/
            /*margin-top: 10px;*/
            /*margin-left: 10px;*/
            /*margin-right: 10px;*/
            /*margin-bottom: 10px;*/

            /*上下左右都是10*/
            /*margin: 10px;*/

            /*上下10 左右20*/
            /*margin: 10px 20px;*/

            /*上10 左右20 下30*/
            /*margin: 10px 20px 30px;*/

            /*上10 右20 下30 左40*/
            margin: 10px 20px 30px 40px;





        }

    </style>



</head>
<body>



<div class="box01">111</div>

<div class="box02">222</div>



</body>
</html>