margin和padding

margin和padding是间距元素的两个最常用的属性。边距是某物外部的空间，而填充是某物内部的空间。

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

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是可以使用不言自明的性质。

盒子模型

边距，填充和边框都是所谓的Box模型的一部分。盒子模型的工作方式是这样的：在中间，您有内容区域（比如图像），周围有填充物，周围有边框，周围有边距。可以这样直观地表示：

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