Detailed explanation of CSS padding margin border property

Illustrated CSS padding, margin, and border attributes

The W3C organization recommends that all objects on the web page be placed in a box. Designers can Create definitions to control the properties of this box, including paragraphs, lists, titles, images, and layers. The box model mainly defines four areas: content, padding, border and margin. For beginners, they are often confused about the levels, relationships, and mutual influences among margin, background-color, background-image, padding, content, and border. Here is a 3D schematic diagram of the box model, I hope it will be easier for you to understand and remember.

##

margin：层的边框以外留的空白
background-color：背景颜色
background-image：背景图片
padding：层的边框到层的内容之间的空白 
border：边框 
content：内容

Next we will talk about the key to HTML and CSS——

Box model(Box model ). The key to understanding the Box model is the margin and padding attributes, and correctly understanding these two attributes is also the key to learning to use CSS layout.

Note: Why not translate margin and padding?

Reason 1: There is no corresponding word in Chinese;
Reason 2: Even if there is such a word, because when writing css code When explaining, margin and padding must be used. If we always use Chinese words to explain them, it will be easy to confuse the concepts of margin and padding in practical applications.

If you have a little

Html basics, you should understand some basic elements (Element), such as p, h1~h6, br, p, li, ul, img, etc. If these elements are subdivided, they can be divided into top-level (top-level) elements, block-level (block-level) elements and inline (inline) elements.

Block-level elements are the main and key elements that constitute an html, and any block-level element can be explained using the Box model.

Box Model: Any block-level element is composed of five parts: content (content), padding, background (including background color and pictures), border (border), and margin.
The three-dimensional view is as follows:

The floor plan is as follows:

Based on the above two pictures, I believe everyone will have an intuitive understanding of the Box model.

The margin and padding attributes are explained below: 1. Margin: including margin-top, margin-right, margin-bottom, margin-left,
Control block-level elements The distance between them is transparent and invisible. According to the clockwise rules of top, right, bottom and left, it can be written as margin: 40px 40px 40px 40px;For easy memory, please refer to the picture below:

When up, down, The left and right margin values ​​are the same, which can be abbreviated as:

margin: 40px 40px;

The first 40px represents the upper and lower margin values, and the latter 40px represents the left and right margin values.

When the upper, lower, left and right margin values ​​are consistent, it can be abbreviated as:

margin: 40px;

2. Padding: including

padding-top, padding-right, padding-bottom, padding-left, controls the distance between inside block-level elements, content and border. Please refer to the writing method of margin attribute for their code and abbreviation.

So far, we have basically understood the basic usage of margin and padding attributes. However, in practical applications, there are always some things that you can't figure out, and they are more or less related to margin.

Note: When you want the content of two elements to be vertically separated, you can choose either padding-top/bottom or margin-top/bottom, and then

Ruthless It is recommended that you try to use padding-top/bottom to achieve your purpose. This is because there is a phenomenon of Collapsing margins in CSS.

Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素，垂直方向的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

图解CSS padding、margin、border属性

W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

margin：层的边框以外留的空白
background-color：背景颜色
background-image：背景图片
padding：层的边框到层的内容之间的空白 
border：边框 
content：内容

接下来将讲述HTML和CSS的关键——盒子模型(Box model)。理解Box model的关键便是margin和padding属性，而正确理解这两个属性也是学习用css布局的关键。

注: 为什么不翻译margin和padding? 
原因一: 在汉语中并没有与之相对应的词语； 
原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念。

如果有一点Html基础的话，就应该了解一些基本元素(Element)，如p、h1~h6、br、p、li、ul、img等。如果将这些元素细分，又可以分别为顶级(top-level)元素、块级(block-level)元素和内联(inline)元素。

块级元素是构成一个html的主要和关键元素，而任意一个块级元素均可以用Box model来解释说明。
Box Model: 任意一个块级元素均由content(内容)、padding、background(包括背景颜色和图片)、border(边框)、margin五个部分组成。
立体图如下:

平面图如下:

根据以上两图，相信大家对于Box model会有个直观的认识。

以下说明margin和padding属性:
1、margin: 包括margin-top、margin-right、margin-bottom、margin-left，控制块级元素之间的距离，它们是透明不可见的。根据上、 右、下、左的顺时针规则，可以写为 margin: 40px 40px 40px 40px;
为便于记忆，请参考下图:

当上下、左右margin值分别一致, 可简写为:

margin: 40px 40px;

前一个40px代表上下margin值，后一个40px代表左右margin值。
当上下左右margin值均一致，可简写为:

margin: 40px;

2、Padding: 包括padding-top、padding-right、padding-bottom、padding-left，控制块级元素内部，content与border之间的距离，其代码，简写请参考margin属性的写法。

至此，我们已经基本了解margin和padding属性的基本用法。但是，在实际应用中，却总是发生一些让你琢磨不透的事，而它们又或多或少的与margin有关。

注: 当你想让两个元素的content在垂直方向(vertically)分隔时，既可以选择padding-top/bottom，也可以选择margin-top/bottom，再此Ruthless建议你尽量使用padding-top/bottom来达到你的目的，这是因为css中存在Collapsing margins(折叠的margins)的现象。

Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素，垂直方向的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

The above is the detailed content of Detailed explanation of CSS padding margin border property. For more information, please follow other related articles on the PHP Chinese website!