边距和内边距

margin（外边距）和 padding（内边距）是用于元素间距的两个最常用的属性。外边距是元素外部的空间，而内边距是元素内部的空间。

将 h2 的 CSS 代码更改为以下内容


h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 20px;
    padding: 40px;
}

这会在二级标题周围留下 20 像素宽的空间，而标题本身则因为 40 像素宽的内边距而显得较胖。

也可以单独设置元素的四个边。margin-top（上外边距）、margin-right（右外边距）、margin-bottom（下外边距）、margin-left（左外边距）、padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）和 padding-left（左内边距）是您可以使用的不言自明的属性。

盒子模型

外边距、内边距和边框（参见下一页）都是被称为盒子模型的一部分。盒子模型的工作原理如下：中间是内容区域（假设是一张图片），内容区域的周围是内边距，内边距的周围是边框，边框的周围是外边距。它可以这样直观地表示：

外边距框

边框框

内边距框

元素框

您不必使用所有这些，但记住盒子模型可以应用于页面上的每个元素会很有帮助，这是一件很强大的事情！