CSS padding margin border attribute details, paddingmargin

CSS padding margin border attribute details, paddingmargin

 

Graphic CSS padding, margin, and border attributes

W3C recommends placing all the images on the web page in a box. Designers can create definitions to control the attributes of this box, these images include paragraphs, lists, titles, images, and layers. The box model mainly defines four areas: content, padding, border, and margin ). For beginners, it is often difficult to understand the levels, relationships, and mutual influences between margin, background-color, background-image, padding, content, and border. Here we provide a 3D box model for your understanding and memory.

Margin: blank background-color: background color background-image: background image padding: blank border: border content: content

 

Next we will introduce the key to HTML and CSS-the Box model ). The key to understanding the Box model is the margin and padding attributes. Correct understanding of these two attributes is also the key to learning to use css layout.

Note: Why not translate margin and padding?
Cause 1: there are no corresponding words in Chinese;
Cause 2: even if there is such a word, because when writing css code, we must use margin and padding. If we always use Chinese words to replace them, it is easy to confuse the concepts of margin and padding in actual applications.

If there is a little Html basics, you should understand some basic elements (elements), such as p, h1 ~ H6, br, div, li, ul, img, etc. If these elements are subdivided, they can also be top-level elements, block-level elements, and inline elements.

Block-level elements constitute the main and key elements of an html, and any block-level element can be explained using the Box model.
Box Model: any block-level element consists of content, padding, background (including background color and image), border (border), and margin.
The three-dimensional diagram is as follows:

The plan is as follows:

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

The following describes the attributes of margin and padding:
1. margin: including margin-top, margin-right, margin-bottom, margin-left,Control the distance between block-level elementsThey are transparent and invisible. According to the clockwise rule of top, right, bottom, and left, it can be written as margin: 40px 40px 40px;
For easier memory, see:

When the upper and lower, left and right margin values are the same, they can be abbreviated:

margin: 40px 40px; 

The first 40px represents the upper and lower margin values, and the last 40px represents the left and right margin values.
When the upper, lower, and left margin values are the same, the value can be abbreviated:

margin: 40px;

2. Padding: Includes padding-top, padding-right, padding-bottom, and padding-left,Controls the interior of block-level elements, The distance between content and border. For the code, see the description of the margin attribute.

Now, we have a basic understanding of the basic usage of the margin and padding attributes. However, in practice, there are always things that you cannot figure out, and they are more or less related to margin.

Note: If you want to separate the content of two elements in vertically, you can select padding-top/bottom or margin-top/bottom.RuthlessWe recommend that you use padding-top/bottom as much as possible to achieve your goal, because the css contains Collapsing margins.

Collapsing margins: the margins folding phenomenon only exists in the adjacent or subordinate elements, vertical margin.

 

Details are as follows:
If only one edge is provided, all four edges are used;
If two values are provided, the first value is used for top-bottom and the second value is used for left-right;
If three are provided, the first is used for the top, the second is used for the left-right, and the third is used for the bottom;
If all four parameter values are provided, the top-right-bottom-left parameters are added to the four sides.

Body {padding: 36px;} // The patch margins of the four sides of the object are all 36px body {padding: 36px 24px;} // The patch margins of the upper and lower sides are 36px, the patch margins on the left and right sides are 24px body {padding: 36px 24px 18px;} // The patch margins on the top and bottom are 36px and 18px respectively, the patch margins on the left and right sides are 24px body {padding: 36px 24px 18px 12px;} // the top, right, bottom, and left patch margins are 36px, 24px, 18px, and 12px, respectively.