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

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


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

这在辅助标题周围留有20像素宽度的空间,而标题本身因40像素宽度的填充而发胖。

元素的四个面也可以分别设置。margin-topmargin-rightmargin-bottommargin-leftpadding-toppadding-rightpadding-bottom并且padding-left是可以使用不言自明的性质。

盒子模型

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

Margin box

Border box

Padding box

Element box

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