The
CSS margin properties define the space around the element. You can set the top, right, bottom, and left margins by using a separate property. You can also use the abbreviated outer margin property to change all the outer margins at the same time. --w3school
Boundary (margin): Extra whitespace is generated around the element. A "white space" usually refers to an area where other elements cannot appear and the parent element's background is visible. The--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 "filler" (or "white") explained by the CSS authoritative guide because he is very graphic. Filler (padding): Filler is located 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, there are many discussions on the internet, most seem to discuss the point above, but also some nowhere near feeling, always answer not to the point. and margin and padding in many places often the effect is exactly the same, and you can not say this must be used margin that must use padding, because the actual effect is the same, you said margin use up good he said padding use up will be better, But often the argument is fruitless. According to the summary of the Internet to find out roughly these are still more reliable:
When should use margin:
need to add white space outside the border. The
whitespace does not require a background (color).
The white space between the two boxes that are connected up and down needs to be offset each other. such as 15px + 20px of margin, will get 20px blank.
When to use padding:
You need to add white space when border.
When a background (color) is required in the margin.
The white space between the two boxes that are connected up and down, hoping to equal the sum of both. such as 15px + 20px of padding, will get 35px blank.
personally think: margin is used to separate elements from the spacing between elements, padding is used to separate elements from the content of the interval. Margin is used to layout separate elements so that elements are irrelevant to elements; padding is used for the interval between elements and content, and there is a "breathing distance" between the content (text) and the (wrapped) elements.
| code is as follows | copy code |
| <meta http-equiv= "Content-type content=" text/ html Charset=utf-8 "/> |
|
The above effect looks good and achieves the goal we need to achieve. However, we look at this code carefully, in contrast to the rules we have mentioned above, FirstChild used margin-top:20px to separate the parent element from his distance, Secondchild also used Margin-top : 15来 separates him from the firstchild distance, I look at the very accord with what we call margin is used to separate elements from the spacing between elements. But he fits what we call margin. Use to layout separate elements so that elements are irrelevant to elements?
Here I want to say is no,firstchild and middle belong to a kind of father-son element relationship, is a kind of parcel element and content of relationship, between them from the personification of point of view, should not be old dead irrelevant situation. We come to see why we want to let firstchild with his father element distance, from the point of view of performance, the text and edge too close, certainly not look. So that the distance between the text and the elements, both beautiful, and make the text has enough "breathing space", easy to read, which precisely conforms to the padding for elements and content between the content (text) and (parcel) between the elements have a "breathing distance."
Let's see, 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 render the child element top of the parent element margin hidden dangers can be seen this time margin is obviously not a good choice.
We try to modify it like this:
| The code is as follows | Copy Code |
| <meta http-equiv= "Content-type content=" text/ html Charset=utf-8 "/> |
|
Let's take a look at the benefits of this writing:
1. The appearance is still good, the structure is clear and does not destroy the layout.
2. There is no such problem as vertical outer-margin merging.
3. Writing standard, code quantity reduction, reusability is good.
We can see in the middle_2 in addition to the unwanted border-top, instead of a more practical padding:20px 0, so that the content of the middle_2 has enough "breathing space", can also modify this padding anytime and anywhere, so that the content of the text " Breathing space "increases or shrinks, and whenever you modify a middle_2 padding, you can plan all the elements and internal content of the package.
Note that this is the parent element application padding, which creates a gap between its contents, which is consistent with what we translate as "filler" (so I've always liked to call padding "filler" rather than an inner margin), and padding is the one who can get the most out of his value here. This example removes the margin-top of the first element and applies padding to the parent element. Conversely, you will think, since Margin-top is not good to use, then my first element uses padding-top not also can achieve effect. Congratulations, you've made a step forward, indeed, using Padding-top is the first element with the outer wrapping element to create a breathing distance, and there will be no so-called vertical margin overlap problem, but I still do not recommend you to do so. Why, then? Let's imagine a situation, if one day, your module to make changes, new requirements to delete this firstchild, replaced by Otherchild, what will happen?
New requirements require us to add a new otherchild to replace the original firstchild:
| The code is as follows | Copy Code |
| <meta http-equiv= "Content-type content=" text/ html Charset=utf-8 "/> |
|
Did you find the problem? If you delete the original firstchild, the new element does not define the top margin or padding at all, then he will naturally top the head, not the desired effect. Sure, you can write a new CSS for him to get him a little more space on the head, but how do you write it? Do you want to change otherchild directly? If there are otherchild in other pages then you will disrupt the otherchild layout of other places. Well, then I use. middle_3. otherchild{padding-top:10px;} How do you like it. Yes, I can, but don't you feel so tired? Every time you modify, you need to add this extra code for the simple separation point distance, as a passage, your CSS file code will be bloated, portability greatly weakened.
Every time I develop, I keep telling myself that the code you write will one day be replaced, modified, and updated by other developers. And a good front-end to write CSS not only in the current structure is strong and also for future developers to provide convenience. Modify my code, change before the design position is the same, so that after the developers fundamentally avoid contact to "repair" the opportunity to develop, that is a real front-end pursuit. Here you put the div of the parcel like the "encapsulation" of the environment, and this div has left enough of the content of the "Breathing Space", you only need to change the content, the content to take into account the location of the problem, the outsourcing DIV element has already helped you set aside, you use it convenient, the future is also convenient to change, Directly find middle modify padding can be.
To margin or to be padding, which is the question.
Padding and margin we are mainly in the compatibility of multiple browsers will carefully consider, is generally padding more than margin oh, because the margin margin problems may appear layout chaos.
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
