CSS 为什么元素有默认的外边距

在本文中，我们将介绍为什么HTML中的元素会有一个默认的外边距。了解这一点对于CSS的使用和网页布局设计非常重要。

阅读更多：CSS 教程

什么是元素？

在HTML文件中，元素是所有可见内容的容器。它包含网页中显示给用户的全部内容，例如文本、图片、链接、表单等。在CSS中，我们可以对元素应用样式来调整整个网页的外观。

为什么元素有默认的外边距？

当我们在HTML文档中创建一个新的元素时，浏览器会根据默认样式来渲染它。这些默认样式是浏览器自身所提供的，旨在确保网页在各种设备和浏览器中能够以可读和可访问的方式呈现。

默认样式中的一个常见属性是margin（外边距）。我们在元素上没有明确设置任何外边距时，浏览器会自动为元素添加一个默认的外边距。这个默认的外边距通常是8px或其他浏览器特定的值。

这种默认的外边距有几个原因：

分离内容与边框: 外边距使得内容与网页的边框（viewport）之间保留了一定的距离。这有助于使网页的内容看起来更加清晰和独立，并提供更好的可读性。
防止冲突: 外边距能够防止相邻元素之间发生意外的重叠。通过增加一些空间，外边距可以确保不同元素之间的内容不会相互重叠，从而提供更好的布局和可视效果。
默认布局设置: 外边距为网页提供了默认的布局设置。它使得元素在页面上有一定的间距，并遵循一般认可的空间关系。这有助于新手或没有经验的开发者创建基本的网页布局。

同时，值得注意的是，不同的浏览器可能会有不同的默认外边距。这是因为各个浏览器对于默认样式的实现可能存在差异。为了确保在不同浏览器上获得一致的外观，我们通常会使用CSS reset或normalize工具来重置浏览器的默认样式。

下面是一个示例，展示了一个只包含一个标题的简单HTML网页的外边距默认效果：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 8px;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，我们为元素添加了一个margin属性，将外边距设置为8px。这是只是一个示例，实际上浏览器的默认外边距可能会略有不同。

如何去掉默认的外边距？

如果我们不想使用默认的外边距，可以通过CSS来覆盖或重置它。我们可以设置自定义的外边距，或者将外边距设置为0来完全去掉它。

下面是一些常用的方法来去掉默认的外边距：

使用CSS reset: CSS reset是一种常见的技术，用于通过重置浏览器的默认样式来确保不同浏览器上的一致性。它通常通过为所有元素设置样式，包括将外边距重置为0。
将外边距设置为0: 我们可以针对具体的元素，在CSS中将外边距设置为0，以去掉默认的外边距。例如，对于元素，我们可以使用以下样式：