外边距

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 35 课，共 76 课。

在 CSS 中，margin 是元素周围、所有已定义边框之外的空间。它是盒模型的另一个重要组成部分。外边距用于在元素之间留出空间，让它们彼此分开。

你可以分别控制元素四侧（上、右、下、左）的外边距，也可以使用简写形式。

这是使用 margin 属性的基本语法：

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top：元素顶部的外边距。
margin-right：元素右侧的外边距。
margin-bottom：元素底部的外边距。

margin-left：元素左侧的外边距。
value：所需的外边距值，可以用像素（px）、em（em）、百分比（%）或其他有效的 CSS 单位指定。

你也可以使用简写形式一次性设置四边的外边距，例如：

p {
    margin: 20px; /* 四边使用相同的外边距 */
}

div {
    margin: 10px 25px; /* 上下外边距设为 10px，左右外边距设为 25px */
}

.button {
    margin: 15px 30px 10px 5px;/* 分别设置每一边的外边距 */
}

在这个示例中，所有 <p> 元素的四边外边距都是 20px，所有 <div> 元素的上下外边距都是 10px，左右外边距都是 25px，所有类名为 button 的元素的上外边距是 15px，右外边距是 30px，下外边距是 10px，左外边距是 5px。

挑战

简单

给你一个包含标题（<h1>）和区块（<div>）的 HTML 文档。你的任务是使用 margin 属性为这些元素添加空白。请按以下步骤操作：

编写一条 CSS 规则，选中 <h1> 元素。将所有边的 margin 设置为 20px。
编写一条 CSS 规则，选中 <div> 元素。将顶部和底部的 margin 设置为 10px，将左侧和右侧的 margin 设置为 30px。

亲手试试

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>