CSS box Model Diagram and graphic explanation

When I first came to the web, when I was in college, the first page I wrote was the landing page, which was the layout of the table. After contacting the CSS, it is used p+css layout, realizes the separation of performance and structure, very flexible. Although I have been exposed to the layout of CSS, but not often used, resulting in a lot of things have been forgotten. and recently in the CSS layout, I would like to record here, as their own study notes.

CSS box model is a core concept in CSS. In the Web page we can think of all the elements of the page as a box, a box including margin, border, padding, and the content of four parts, such as.

The following is an explanation of the effect of these four parts, in turn, from outside to inside.

• Margin (margin): Represents the margin of this element with other elements, and it is important to note that if the value of margin is set by two adjacent elements, the maximum value will prevail. such as two upper and lower adjacent p, the above P set margin:30px, the following P set margin:50px, then the last two elements of the interval will not be 30+20=50px, but will be 30px.

• Border (border): Represents the border of this page element, but the border is set size, background (color or picture), style (implement or dashed lines, etc.).

• Padding (padding): represents the distance between the element content and the bounding rectangle. It can be referred to as the element's left white.

• Content: Represents the content area of an element, such as the size of the text.

Where the margin, border, padding, can be applied to the upper and lower left and right four edges of the element, or can be applied to each individual edge. In particular, the margin can also be set to a negative value, in some special cases, it is necessary to use the margin is negative.

Generally we set an element width and height, which is generally the width and height of the padding+content area, not including margin and border.

When I set the background color of the element, the background is applied only to the area within the element's bounding rectangle, which is padding+content, and the background color of the margin and border area is not changed.

An instance is shown below. The code is as follows:

The effect is as follows: