Margin and padding, marginpadding

Margin and padding, marginpadding

The question of using margin or padding is believed to be something everyone wants to know about css.

The CSS margin attribute defines the space around the element. You can set the outer margin of the top, right, bottom, and left by using a separate attribute. You can also use the abbreviated margin property to change all the margins at the same time. -- W3School

Border (margin): An Extra blank area is generated around the element. "Blank area" usually refers to areas where other elements cannot appear and the parent element background is visible. -- CSS authoritative guide

Padding is called the padding, and its judgment is based on the distance between the border and the body of the content. I like the "padding" (or "whitelist") explained by the CSS authoritative guide "), because of his image. Padding: the padding is located between the boundary of the element box and the content area. Naturally, the attribute that affects this region is padding. -- CSS authoritative guide

Use the abbreviated margin property to change all margins at the same time: margin: top right bottom left; (eg: margin: 10px 20px 30px 40px) the memory mode is the "upper right bottom left" clockwise around the element.

The formula also provides the omitted numeric Statement, which is basically as follows:

1. If there is only one value for margin, the upper right and lower left margin are the same. For example, margin: 10px; is equal to margin: 10px 10px 10px;

2. If there are only two margin values, the first value indicates the upper and lower margin values, and the second value indicates the left and right margin values. For example: margin: 10px 20px; it is equal to margin: 10px 20px 10px 20px;

3. If margin has three values, the first value indicates the upper margin value, the second value indicates the left and right margin values, and the third value indicates the lower margin value. For example: margin: 10px 20px 30px; it is equal to margin: 10px 20px 30px 20px;

4. If margin has four values, the four values correspond to the top-right-bottom-left margin values. Example: margin: 10px 20px 30px 40px;

In practical applications, we do not recommend using three values of margin. One is mistaken, and the other is not easy to modify in the future. If it is written as margin at the beginning: 10px 20px 30px; in the future, the requirement will be changed to above 10px, right 30px, lower 30px, and left 20px. You still have to split this margin into margin: 10px 30px 20px; laborious and thankless, for example, you can write margin: 10px, 20px, 30px, and 20px in the beginning. In reality, do not increase the development cost in the future to save two bytes.

Similarly, padding can also set the top, right, bottom, and left padding of similar methods.

Here is an additional knowledge point:Outer margin merge

Meaning: When two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.

There are different opinions on when to use margin and when to use padding. In addition, the effect of margin and padding is often the same in many places, and you cannot say that you must use margin to use padding, because the actual effect is the same, you said margin was used up. He said padding would be better, but it is often fruitless. According to the summary on the Internet, it is found that these items are relatively reliable:

When to use margin:
When adding a blank space outside the border.
When no background (color) is required in the blank area.
The gap between the two upper and lower boxes needs to be offset. For example, the margin of 15px + 20px will be blank with 20px.

When should padding be used at that time:
When adding a blank space in the border internal test.
When the blank area requires background (color.
The gap between the two boxes that are connected up and down is expected to be equal to the time between the two. For example, the padding of 15px + 20px will get a blank space of 35px.

I personally think:Margin is used to separate the spacing between elements and elements; padding is used to separate the interval between elements and content. Margin is used to separate elements so that elements and elements are irrelevant. padding is used to separate elements from the content, so that there is a "breathing distance" between the content (text) and (Package) elements ".

Example:

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

The above results seem very good and have achieved the goal we need to achieve. However, let's take a closer look at this Code. In contrast to the rules we mentioned above, m-top uses margin-top: 30px to separate the distance between the parent element and him, m-bottom also uses margin-top: 15px to separate the distance between him and m-top. What we call margin is used to separate the spacing between elements and elements. But does it comply with what we call the margin used to separate elements in layout so that elements and elements are irrelevant?
Here I want to talk about NO. m-top and middle belong to a parent-child relationship and a relationship between package elements and content. From the anthropomorphic perspective, it should not be an irrelevant situation. Let's take a look at why we want to separate m-top from its parent element. From the perspective of performance, words and edges are too close. The distance between the text and the element edge is both beautiful and makes the text have enough"Breathing space"For ease of reading, this is exactly the same as the interval between the padding element and the content so that there is a "breathing distance" between the content (text) and (Package) elements ".
Let's take a look at this. The use of margin-top on m-top triggers a hidden risk of vertical outer margin merging. If middle does not add a similar border-top: 3px solid purple will present the hidden danger that the child element has topped the parent element margin in the standard browser. Obviously, margin is not a good choice at this time.
Let's try to modify it like this:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

Let's take a look at the advantages of this writing:
1. The appearance is still good, and the structure is clear and does not damage the layout.
2. There will be no vertical outer margin merge problem.
3. Standardized writing, reduced code volume, and good reusability.
We can see that in the middle, we can remove the unnecessary border-top and change it to a more practical padding: 30px 0, so that the content in the middle has enough "breathing space ", in the future, you can modify the padding anytime and anywhere to increase or decrease the "breathing space" of the content and text, you can modify only one middle padding anytime and anywhere to plan all the package elements and internal content.
Note that padding is applied to the parent element so that there is a gap between it and its content. This is in line with the essence of our translation for "padding" (so I always like to call padding "padding" instead of padding ), padding is also the best way to check his value here. In this example, the margin-top of the first element is removed and padding is applied to the parent element. In turn, you will think, since margin-top is not easy to use, will my first element use padding-top to achieve the effect. Congratulations, you have already taken a step forward. Using padding-top makes breathing distance between the first element and the outer package element, and there will be no vertical outer margin overlap, but I still don't recommend that you do this. Why? Let's imagine this situation. What if one day your module will change and the new requirement will delete m_top and replace it with m_other?
The new requirement requires us to add a new m_other to replace the original m_top:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

Have you found any problems? If you delete the original m_top element, the new element does not have the upper margin or upper padding defined at all, then it will naturally top the header, not the ideal effect. Indeed, you can write a new css for him to make him a little more space than the header, but how do you write it? Directly change m_other? If m_other exists in other pages, you will disrupt the m_other layout in other places. Well, how can I use. middle. m_other {padding-top: 10px. Yes, you can. But don't you feel so tired? Every time you modify it, you need to add this redundant code to make it simple to separate points. Over time, your css file code will be bloated and the portability will be greatly reduced.
I keep talking to myself during every development. The code you write will be replaced, modified, and updated by other developers one day. A good front-end css not only has a solid structure, but also provides convenience for future developers. Modify my code and the style positions after the change are the same, so that later developers can fundamentally avoid the opportunity to "Repair" the development again, which is the pursuit of true content. Here, you put the wrapped div like "encapsulating" an environment, and there is enough "breathing space" in the div, you just need to change the content, the content needs to take into account the location margin issue. The outsourced div elements have already been reserved for you. It is convenient for you to use and change it later. You can directly find middle to modify the padding.
Final optimization:
Generally, padding is used in the parent element. In this way, the parent element and the child element are left white to avoid the element being close to the border and affecting the appearance. It is often used in the Cotton School. However, there is a problem here. In the above example, I will slightly change the css code.
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

If you want to change the result to make it look more natural, you only need to change the middle style, as shown below:
.middle{  width:100px;  background-color:lawngreen;  padding:30px;  }