前端设计师第一课：CSS中外边距 margin、边框border和内边框 padding的差异

CSS  里padding、边距和边框属性

W3C组织建议将页面上的所有对象放在一个框中。设计人员可以通过创建定义（包括段落、列表和标签）来控制此框的属性

问题、图片和图层。长方体模型主要定义四个区域：内容、内边距padding、边框和外边距。对于初学者来说，他们经常很吃力

阐明边距、背景颜色、背景图像、填充、内容和边框之间的层次结构、关系和相互影响。这提供了长方体模型的三维表示

首先要先了解几个重要的元素，目的是为了促进你的理解和记忆。

边框Border：层或表格里的边框

背景色Background colo：层或边框里的背景色

背景图像Background color：层或边框里的背景图像

内边距 padding：层边界和层内容之间的空白距离

外边距 margin： 块级元素之间的空间距离

内容Conten： 一般是文字或图片等信息

接下来，我们将讨论HTML和CSS的关键——Box模型。理解Box模型的关键是margin和padding属性，正确理解这两个属性也至关重要

这是学习CSS布局的关键。

注意：为什么不翻译外边框距margin和内边框距 padding？

原因⼀: 汉语中没有相应的单词；

原因#1：即使有这样的单词，因为在编写CSS代码时，需要使用“margin”和“padding”，如果我们总是用中文单词来解释它们，在实践中也需要一些时间

很容易混淆边距和填充的概念。

如果你对HTML有一定的基础，你应该了解一些基本元素，比如p、h1-h6、br、div、li、ul、img等。如果这些元素被细分，它们可以被分离

对于顶级元素、块级元素和内联元素。

块级元素是构成HTML的主要和关键元素，任何块级元素都可以使用Box模型进行解释。

框模型：任何块级元素都由五部分组成：内容、填充、背景（包括背景颜色和图像）、边框和边距。

车身示意图如下：

平面布置图如下：

基于以上两张图，我相信用户会对Box模型有一个直观的了解。

以下内容解释了边距和填充属性：

1.页边距：包括页边距顶部、页边距右侧、页边距底部和页边距左侧，控制块级元素之间的距离，透明和不可见。基于顶部，右侧

底部和左侧的顺时针规则可以写为margin：40px 40px 40px 40px；

为了便于记忆，请参考下图：

当上、下、左、右边距值一致时，可以缩写为：

margin：40px 40px；

第一个40px表示上下边距值，第二个40px代表左右边距值。

当上、下、左、右边距值一致时，可以缩写为：

margin：40px；

2.填充：包括顶部填充、右侧填充、底部填充和左侧填充，用于控制块级元素及其代理中内容和边界之间的距离

代码的缩写请参阅margin属性的书写。

在这里，我们对margin和padding属性的基本方法有了基本的了解。然而，在实际应用中，总有一些事情是你无法理解的。

注意：当您希望两个元素的内容垂直分隔时，可以选择padding-top/bottom填充或margin-top/bottom。我们建议您

尽量使用padding-top/bottom填充来实现您的目标，因为CSS中存在Collapsing margin( 折叠边距)的现象。

Collapsing margin( 折叠边距)：页边距折叠现象只存在于相邻或从属元素中，垂直方向的页边距。

具体说明如下：

如果只提供一个，则它将应用于所有四条边；

如果提供两个，则第一个位于从上到下的位置，第二个位于从左到右的位置；

如果提供三个，第一个在上面，第二个在左右，第三个在下面；

如果提供了所有四个参数值，它们将按从右上到左下的顺序放置在四边上。

Body｛padding:36px；｝//对象四边的补丁边距均为36px

Body{padding:36px 24px；}//顶部和底部的补丁边距为36px，左侧和右侧的补丁边距均为24px

Body{padding:36px 24px 18px；}//顶部和底部的补丁边距分别为36px和18px，左侧和右侧的补丁边距为24px

Body{padding:36px 24px 18px 12px；}//顶部、右侧、底部和左侧的补丁边距分别为36px、24px、18px和12px