html中margin用法

作者：风中孤狼发布日期:2025-09-28 浏览:100

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置一个 div 的外边距 */
        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px; /* 所有四个方向的外边距都为 20px */
        }

        /* 使用不同的值来设置不同方向的外边距 */
        .box2 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            margin: 10px 20px 30px 40px; /* 上 10px, 右 20px, 下 30px, 左 40px */
        }

        /* 使用两个值，第一个是上下外边距，第二个是左右外边距 */
        .box3 {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            margin: 15px 35px; /* 上下 15px, 左右 35px */
        }

        /* 使用三个值，第一个是上外边距，第二是左右外边距，第三个是下外边距 */
        .box4 {
            width: 200px;
            height: 200px;
            background-color: lightgrey;
            margin: 10px 20px 30px; /* 上 10px, 左右 20px, 下 30px */
        }
    </style>
</head>
<body>

<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

</body>
</html>

解释说明：

margin 属性用于设置元素的外边距，即元素与其他元素之间的距离。
margin 可以接受一个或多个值：
- 如果提供一个值，则该值将应用于所有四个方向（上、右、下、左）。
- 如果提供两个值，第一个值应用于上下，第二个值应用于左右。
- 如果提供三个值，第一个值应用于上，第二个值应用于左右，第三个值应用于下。
- 如果提供四个值，分别应用于上、右、下、左。

上一篇：html语言中代表网页标题的标签是

下一篇：htmlpadding属性