Home > Developer > JavaScript
Solve the problem that the margin-top of the first div in the div layout shows no effect in the browser ., Divmargin-top
Original Source: http://www.hicss.net/do-not-tell-me-you-understand-margin/
Vertical margin merge
Don't be intimidated by the above term. Simply put, the outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins. You can view the W3Shool CSS margin merge to learn about this basic knowledge.
In practice, the vertical margin merge problem is common in the margin-top of the first child element. The spacing between the parent element and the parent element is exceeded, in addition, it only produces problems in standard browsers (FirfFox, Chrome, Opera, and Sarfi), while IE performs well. For example, you can view the following code (IE shows "normal", and a "bug" appears in a standard browser "):
<Html xmlns = "http://www.w3.org/1999/xhtml">
According to the CSS specification, the "good performance" of IE is actually an incorrect performance, because the hasLayout rendering of IE leads to the "good performance" appearance. Other standard browsers will show a "problematic" appearance. Well, if you have read the above W3Shcool CSS margin merge article, it will be easy to discuss this issue. The cause of this problem is:According to the specification, if a box is not filled with padding-top or border-top ), the top margin of the box overlaps with the top margin of the first child element in the internal document stream..
In addition, the white point is: if the top margin of the first child element of the parent element is margin-top, a valid border or padding will not be reached. it will constantly find the trouble of "Leader" (parent element, ancestor element. As long as a valid border or padding is set for the leader, the unleader margin can be effectively controlled to prevent it from going beyond the hierarchy, fake the sacred intent, and execute its own margin as the leader's margin.
As explained above, adding a border-top or padding-top to the middle element in the parent element example can solve this problem.Generally speaking, this problem is explained here, and most articles will not go into depth, but as a practical developer, the most important thing is to know why, the original use of margin-top is to separate the distance from the parent element. According to your solution, it is actually a "repair ", to "fix" the CSS standard Bug of parent-child vertical margin merge, and force border-top and padding-top on the parent element, it is uncomfortable, it's hard to remember that this rule will still be forgotten next time, and if you do not need border-top to add an upper border in the page design draft, this addition will make you feel better, this vulnerability may cause future changes.
Why must we use border-top and padding-top to write such a line of code for such a so-called standard? You can refer to another article to find the answer using Margin or Padding.
Here I will provide the solution based on the above content: you only need to change the margin-top to use padding-top to solve the problem, avoiding the margin folding specification.
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
