Using margin or padding the problem is the only way to learn the CSS step.
The CSS margin property defines the space around the element. By using a separate property, you can set the top, right, bottom, and left margins. You can also use the shorthand margin property to change all margins at the same time. --w3school
Boundary (margin): An extra white space is generated around the element. "White space" is usually the area where other elements cannot appear and the background of the parent element is visible. --CSS Authoritative Guide
Padding is called the inner margin, which is judged by the distance of the border from the body of the content, and I like the CSS authoritative guide explaining the "filler" (or "white"), because he is very image. Filler (padding): The padding is between the boundary of the element box and the content area. Naturally, the attribute used to affect this area is padding. --CSS Authoritative Guide
About when to use margin when using padding, online there are many discussions, most seem to discuss the above, but some ineffective feeling, always answer the point. And the margin and padding in many places often the effect is exactly the same, and you can not say this must use margin that must use padding, because the actual effect is the same, you say that margin used well he said padding use it will be better, But often the argument is fruitless. Based on the online summary of the general findings of these are still relatively reliable:
When margin should be used:
You need to add white space outside the border.
When the background (color) is not needed in the space.
The gap between the top and bottom two boxes that need to be offset from one another. such as 15px + 20px margin, will get 20px blank.
When should you use padding:
You need to add white space to the border beta.
When the background (color) is needed in the space.
The gap between the top and bottom two boxes is equal to the sum of the two. such as 15px + 20px padding, will get 35px blank.
The individual thinks thatmargin is used to separate elements from elements, and padding is used to separate elements from the content. Margin is used to separate elements from elements so that elements are irrelevant to each other, and padding is used for the interval between elements and content, so that there is a "breathing distance" between content (text) and (wrapped) elements.
Let me give you an example.
| 12345678910111213141516171819 | |
The above effect looks good and achieves the goal we need to achieve. However, we look at this code carefully, against the rules we said above, FirstChild used margin-top:20px to separate the parent element from his distance, Secondchild also use Margin-top : 15来 separates his distance from the FirstChild, which is quite in line with what we call margin is used to separate elements from the spacing between elements. But he's in line with what we call margin. Does the layout separate elements make elements irrelevant to each other?
What I want to say here is that no,firstchild and middle belong to a kind of parent-child element relationship, and it is a kind of relationship between package elements and content, and they should not be the irrelevant situation of old death from the personification point of view. Let's see why we want to let FirstChild and his father elements of the distance, from the point of view of performance, the text and side by too close, certainly not good to see. So that the distance between the text and the elements, both beautiful, but also make the text has enough "breathing space", easy to read, which exactly conforms to the padding between the elements and content between the content (text) and (wrapped) elements have a "breathing distance."
Again, FirstChild uses margin-top to raise the risk of vertical margin merging, middle if you don't add a similar border-top:1px solid # CCC words under the standard browser will be rendered child element top of the parent element margin hidden trouble (this is a vertical margin merge problem, you can see don't tell me you know margin, this article is detailed). It is obvious that margin is not a good choice at this time.
Let's try to modify this:
| 12345678910111213141516171819 | |
Let's take a look at the benefits of this writing:
1. The appearance is still good, the structure is clear and the layout is not destroyed.
2. Problems such as vertical margin merging are not generated.
3. Writing standard, the code quantity reduces, the reusability is good.
We can see in the middle_2 in addition to the unnecessary border-top, instead of a more practical padding:20px 0, so that the content of middle_2 has enough "breathing space", can be modified anytime, anywhere, the padding, so that the content of the text " Breathing space "increases or decreases, and whenever you modify only one middle_2 padding, you can take care of all package elements and internal content planning.
Note that this is where the parent element applies the padding, which makes the gap between its contents, which is in line with the essence of our translation as "filler" (so I always like to call padding "filler" instead of the padding), and padding is precisely where he is most able to check his value. This example removes the margin-top of the first element and applies the padding to the parent element. In turn, you will think, since Margin-top is not good, then my first element with Padding-top is not also able to achieve results. Congratulations, you've taken a step forward, and it's true that using padding-top means that the first element has a breathing distance from the outer wrapping element, and there is no so-called vertical margin overlap problem, but I still don't recommend it. Why is it? Let's imagine such a situation, if one day, you this module to produce changes, new requirements to delete this firstchild, replaced by Otherchild, what will happen?
The new requirements require that we add a new otherchild to replace the original firstchild:
| 12345678910111213141516171819 | |
Did you find the problem? If you delete the original firstchild, the new element simply does not define the top margin or filler, then he will naturally top the head, not the ideal effect. Indeed, you can write a new CSS for him to get a little more space from his head, but how do you write it? Do you want to change otherchild directly? If there are otherchild on other pages then you will disrupt the layout of the otherchild elsewhere. Well, then I'll use. middle_3. otherchild{padding-top:10px;} How can it be. Yes, I can, but don't you feel so tired? Each modification, to increase this extra code for a simple separation of points, over time, your CSS file code will be bloated, portability is greatly weakened.
Every time I develop, I always tell myself that the code you write will someday be replaced, modified, and updated by other developers. And a good front end to write the CSS not only in the present structure is strong and can also provide future developers with convenience. Modify my code, change the style before the same position, so that after the developers fundamentally avoid contact with the opportunity to "repair" the development, that is a real front-end pursuit. Here you wrap the div similar to the "encapsulation" good one environment, and this div has left enough content of "breathing space", you only need to change the content, the content to take into account the location margin problem, the outsourced DIV element has already helped you to set up a good, you use it convenient, the future is also convenient to change, Directly find middle modify padding can.
To margin or to be padding, which is the question.
The so-called road thousands, the use of the best of all. The use of margin when the bold use of him, the use of padding also do not flinch, the experience accumulated in the actual combat is often the most useful, and when you are not sure to use margin good or with padding, please look at this principle, perhaps you will have a own answer.
from:http://www.hicss.net/use-margin-or-padding/
With margin or with 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
