外边距 — margin

预计阅读时间1 分 43 views

1 作用

外边距用于在元素周围创建空白间隔，从而调整元素的位置和布局。通过设置外边距，可以在页面上创建元素之间的间隔，或者将元素与其父元素之间的距离调整到所需的距离。

2 语法

selector {
    margin-top: 10px; /* 设置上外边距为10像素 */
    margin-right: 20px; /* 设置右外边距为20像素 */
    margin-bottom: 10px; /* 设置下外边距为10像素 */
    margin-left: 20px; /* 设置左外边距为20像素 */
    /* 或者使用简写形式 */
    margin: 10px 20px; /* 上下外边距为10像素，左右外边距为20像素 */
}

3 示例

下面是一个简单的 HTML 示例，展示了如何在元素上应用外边距：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Margin Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            /* 设置元素外边距 */
            margin: 20px; /* 四个方向的外边距均为20像素 */
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>示例元素</h2>
        <p>这是一个示例元素，通过CSS样式设置了外边距。</p>
    </div>
    <div class="box">
        <h2>示例元素</h2>
        <p>这是另一个示例元素，与上一个元素之间有外边距。</p>
    </div>
</body>
</html>

在这个示例中，两个具有相同类名的 <div> 元素被创建，并且通过 CSS 样式设置了它们的外边距为 20px。这样就在元素周围创建了 20px 的空白间隔，使它们在页面上有一定的距离。

外边距 — margin

1 作用

2 语法

3 示例

Leave a Comment 取消回复

内容