html中margin的用法

作者：〖掉望发布日期:2025-04-23 浏览:103

<!DOCTYPE html>
<html>
<head>
    <title>Margin 示例</title>
    <style>
        /* 使用 margin 属性设置元素的外边距 */
        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            /* margin 属性可以接受一个或四个值：
               1. margin: 10px; - 四个方向的外边距都是 10px
               2. margin: 10px 20px; - 上下外边距是 10px，左右外边距是 20px
               3. margin: 10px 20px 30px; - 上外边距是 10px，左右外边距是 20px，下外边距是 30px
               4. margin: 10px 20px 30px 40px; - 上右下左分别为 10px、20px、30px 和 40px */
            margin: 20px 40px 60px 80px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

上一篇：html滚动条隐藏却有滚动效果

下一篇：html 框架