内边距与外边距区别（The difference between inside margin and
outer margin）
Do you really know margin? Do you know what characteristics margin has? Do you know what the vertical margin merge is? What is the difference between margin in block elements and inline elements? When should I use padding instead of margin? Do you know negative margin? Do you know the use of negative margin in real work? What are the bug of margin under the common browser?......
Writing CSS, you can't deal with margin, and we don't know much about the CSS attribute, which is our most commonly used. In this case, I intend to write this article, one is a summary of their work, but also a carding of their knowledge.
What is Margin?
The CSS margin property defines the space around the element. By using separate attributes, the upper, right, lower, left outer distance can be set. You can also use a simple outer distance property to change all the external distances simultaneously. -- W3School
Boundary, around the element to generate additional blank areas. "Blank space" usually refers to the ar
ea where other elements cannot appear and the parent element background can be seen. CSS authority Guide
I love to use the word "margins" to explain margin (as padding can be called "padding", but I just love to call padding as
"filler" or "blank"), the most basic purpose we can clearly understand that margin is to control the elements around the space interval, to each other apart from the visual angle of purpose.
Characteristics of Margin
Margin is always transparent.
Margin uses separate attributes to set the upper, right, lower, and left outer distances. Namely: margin-top, margin-right, margin-bottom, margin-left.
Value types are: from the outside margin-width auto length percentage | |
It can also use the - distance properties at the same time to change all of the outside top right bottom from margin:: left; (eg: margin:10px 20px 30px 40px) is just above the memory elements clockwise around the "right left" memory.
And the specification also provides the numerical method of ellipsis, basically as follows:
1, if margin has only one value, the upper, lower right and left margin are the same value. For example: margin:10px; equal to margin:10px 10px 10px 10px;
2, if margin has only two values, the first value represents the upper and lower margin values, and the second value is the value of about margin. For example: margin:10px 20px; equal to
margin:10px 20px 10px 20px;
3, if margin has three values, the first value represents the upper margin value, the second value represents the value of the left and right margin, and the third value indicates the value of the lower margin. For example: margin:10px 20px 30px; equal to margin:10px 20px 30px 20px;
4, if margin has four values, the four values correspond to the four margin values of the right, the left and the left, respectively. For example: margin:10px 20px 30px 40px;
In practical application, individuals do not recommend the use of three margin value, one is easy to be confused, two days after the change is not easy, if margin:10px 20px 30px written a start; days after demand changes for 10px, right 30px, 30px 20px, left, you have to have the margin open margi
n:10px 30px 30px 20px; laborious and thankless, as a start in margin:10px 20px 30px 20px honest; for it, not in order to save two bytes now and let the day again after the development of rising costs.
Vertical outer margin merge problem
Don't be frightened by the noun above. Simply speaking, the outer distance means that when the two vertical outer margins meet, they form an outer margin. The height of the combined outer distance is equal to the larger of the two outer heights of the merging. You can see the W3Shool CSS margin merge to understand this basic knowledge.
In actual work,
The merger of the vertical spacing margins are common in the first sub element of the margin-top will open the top of the parent element and the parent element of adjacent elements, and only the standard browser (FirfFox, Chrome, Opera, Sarfi) IE problem, but the good performance. For example, you can see the following code (IE show "normal", under the standard browser view "bug"):
<html xmlns= "/1999/xhtml" >
<head>
<title> vertical margin merge </title>
<style>
.top{width:160px; height:50px; background:#ccf;}
padding是外边距还是内边距
.middle{width:160px; background:#cfc;}
.middle.FirstChild{margin-top:20px;}
</style>
</head>
<body>
<div class= "top" ></div>
<div class= "middle" >
<div class= "firstChild" - I just want to separate the distance from my parent element. </div>
<div class= "secondChild" ></div>
</div>
</body>
</html> if you follow the CSS specification, the "good performance" of IE is actually a mistake, because the hasLayout rendering of IE leads to this "good performance" look. Other standard browsers display a "problematic" look. Well, it's easy to talk about this problem if you've read the merged CSS margins on the top of the W3Shcool. The cause of the problem is according to the specification, a box if there is no filler (padding-top) and the upper frame (border-top), then the box from the top top and the internal document flow in the first sub elements overlap distance.
Besides the white point is: above the first child of the parent element from the margin-top if no valid border or padding. will keep a layer to find their own "leadership" (parent, ancestor). Just give the leadership to set a valid border or padding margin can effective control of this project without leadership to prevent it leapfrog, leave the decree, put their own margin when the leader of the margin implementation. The solution for vertical margins with the already explained above, the middle element parent element in the example to add a border-top or

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。