在freecodecamp学习CSS知识点（padding,margin篇）

padding

每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。

padding 用来控制着元素内容与 border 之间的空隙大小。

我们可以看到蓝色框和红色框是嵌套在黄色框里的。 注意红色框的 padding 比蓝色框的更多。

如果你增加蓝色框的 padding 值，其中的文本内容与边框的距离就也会变大。
padding：10px 10px 10px 10px;
遵循：顺时针，上，右，下，左；

网页中我们如何查看调试代码呢？

margin

外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。

在这里，我们可以看到蓝色框和红色框都在黄色框里。 请注意，红色框的 margin 值要比蓝色框的大，因此红色框看起来比蓝色框要小。

如果你增加蓝色的 margin 值，它也会增加元素边框到其他周围元素的距离。

请将蓝色框的 margin 值设置成和红色框的一样。

网页中我们如何查看调试代码呢？