Using margin or padding is the only way for every advanced CSS learning.
The CSS margin attribute defines the space around the element. By using a separate attribute, you can set the upper, right, lower, and left margins, you can also use the abbreviated margin property to change all the margins at the same time.
Border (margin): an extra blank area is generated around the element. "blank area" usually refers to an area where other elements cannot appear and the parent element background is visible.
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.
There are a lot of discussions on the internet about when to use margin and when to use padding. Most of them seem to be discussing it, but there is a bit of itching feeling, and there is always no answer. 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:
1. When adding a blank space outside border.
2. When no background (color) is required in the blank area.
3. The gap between the upper and lower boxes must be offset. For example, the margin of 15px + 20px will be blank with 20px.
When should padding be used at that time:
1. When adding a blank space in the border internal test.
2. When the background (color) is required for the blank space.
3. The blank space between the upper and lower boxes is expected to be equal to the time between the two boxes. For example, the padding of 15px + 20px will get a blank space of 35px.
In my opinion, margin is used to separate the spacing between elements and elements, and padding is used to separate the spacing 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 ".
| The code is as follows: | Copy code |
| <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/> <Title> use Margin or Padding </title> <Style> . Top {width: 160px; height: 50px; background: # ccf ;} . Middle {width: 160px; background: # cfc; border-top: 1px solid # ccc ;} . Middle. firstChild {margin-top: 20px ;} . Middle. secondChild {margin-top: 15px ;} </Style> </Head> <Body> <Div class = "top"> </div> <Div class = "middle"> <Div class = "firstChild"> I am firstChild. I just want to separate the distance from my parent element, which looks comfortable. </Div> <Div class = "secondChild"> I want to separate the distance from the upstairs. Well, it's better to breathe at the bottom. </Div> </Div> </Body> </Html> |
|
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, firstChild uses margin-top: 20px to separate the distance between the parent element and him, secondChild also uses margin-top: 15 to separate the distance between him and firstChild. 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". The relationship between firstChild and middle is 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 firstChild from its parent element. From the perspective of performance, words and edges are too close. The distance between the text and the elements is both beautiful and the text has enough "breathing space" to facilitate reading, this exactly matches the padding's interval between elements and content so that there is a "breathing distance" between the content (text) and (package) elements ".
Let's take a look at it. firstChild's use of margin-top triggers a hidden risk of vertical outer margin merging. If middle does not add a similar border-top: if 1px solid # ccc is used, the child element will be displayed in the standard browser. The Hidden Danger of parent element margin is obvious. At this time, margin is obviously not a good choice.
Let's try to modify it like this:
| The code is as follows: | Copy code |
| <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/> <Title> use Margin or Padding </title> <Style> . Top {width: 160px; height: 50px; background: # ccf ;} . Middle_2 {width: 160px; background: # cfc; padding: 20px 0px ;} . Middle_2. firstChild {} . Middle_2. secondChild {margin-top: 15px ;} </Style> </Head> <Body> <Div class = "top"> </div> <Div class = "middle_2"> <Div class = "firstChild"> I am firstChild. I just want to separate the distance from my parent element, so it looks comfortable </div> <Div class = "secondChild"> I am secondChild, and I want to separate the distance from the upstairs. Well, it's better to breathe at the bottom. </Div> </Div> </Body> </Html> |
|
Let's take a look at the advantages of this writing:
1. The structure is clear and the layout is not damaged.
2. There will be no vertical outer margin merge problem.
3. Standardized writing, reduced code volume, and good reusability.
We can see that in middle_2, we can remove the undesired border-top and change it to a more practical padding: 20px 0, so that the content in middle_2 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_2 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, the new requirement will delete the firstChild, and replace it with otherChild?
The new requirement requires us to add an otherChild to replace the original firstChild:
| The code is as follows: | Copy code |
| <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/> <Title> use Margin or Padding </title> <Style> . Top {width: 160px; height: 50px; background: # ccf ;} . Middle_3 {width: 160px; background: # cfc ;} . Middle_3. otherChild {font-weight: bold; font-style: italic ;} . Middle_3. secondChild {margin-top: 10px ;} </Style> </Head> <Body> <Div class = "top"> </div> <Div class = "middle_3"> <Div class = "otherChild"> I am new to otherChild. I also want to separate myself from my parent element. This looks comfortable, okay ?! Why am I at the top? </Div> <Div class = "secondChild"> I am secondChild, and I want to separate the distance from the upstairs. Well, it's better to breathe at the bottom. </Div> </Div> </Body> </Html> |
|
Have you found any problems? If you delete the original firstChild, 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? Can I directly change otherChild? If there is otherChild in other pages, you will disrupt the otherChild layout in other places. Well, how can I use. middle_3. otherChild {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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
