Illustration of CSS padding, margin, and border properties

The W3C organization recommends that all objects on the web page be placed in a box. Designers can control the properties of this box by creating definitions. These objects include 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 - the 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, margin and padding must be used when writing CSS code. If If we always use Chinese words to explain it, it is easy to confuse the concepts of margin and padding in practical applications.

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

Block-level elements are the main and key elements that make up 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, padding, background (including background color and pictures), 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: includes margin-top, margin-right, margin-bottom, margin-left, controls the distance between block-level elements, they are 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 the upper and lower and left and right margin values ​​are the same, it 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 the same, it can be abbreviated as:

margin: 40px;

2. Padding: includes 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 its code and abbreviation.

At this point, 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. Here Ruthless recommends that you use padding- as much as possible. top/bottom to achieve your purpose. This is because there is a phenomenon of Collapsing margins in CSS.

Collapsing margins: The phenomenon of margins collapsing only exists in vertical margins of adjacent or subordinate elements.

The details are as follows:
If only one is provided, it will be used for all four sides;
If two are provided, the first one is for up-down, and the second one is for left-right;
If three are provided, the One is for up, the second is for left-right, and the third is for down;
If all four parameter values ​​are provided, it will act on the four sides in the order of up-right-down-left.

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

Original link: http://www.cnblogs.com/linjiqin/p/3556497.html