Vertical Margin of Margin and vertical Margin of Margin

Source: Internet
Author: User

Vertical Margin of Margin and vertical Margin of Margin

During the exercise, I encountered a margin problem. The code structure is as follows: Set margin: 50px auto for the sub-element div in the parent element body; originally, I wanted to make the sub-element div 50 pixels away from the parent element, but the result was that the sub-element div is as high as the parent element body, and the distance from the

<! Doctype html> 

Figure ():

 

I checked some information and found out the problem of the margin merging of the margin,

In short, 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 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.

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 other words, if the margin-top of the first child element of the parent element does not reach a valid border or padding. 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.

Solution to this problem: Add a border-top or padding-top to the parent element to solve this problem. In this example, you can change the body element of the parent element to the following style:

 

Body {margin: 0; padding-top: 1px;/* or border-top: 1px solid transform; */width: 100%; height: 100%; background: # 47c9af ;}

 

The modified result is as follows (B): The child element div and the parent element body are actually opened.

The first time I wrote a blog, continue to cheer! (If you find any problem with the blog post, please correct it)

For the vertical margin of margin, refer to link http://wenku.baidu.com/link? Url = Response

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.