Home > Developer > Web Develop
1: <! doctypehtml Public "-//W3C//DTD HTML 4.0 transitional//en" >
2:<html>
3:<head>
4: < title > </title>
5: <metaname= "content=" ">
6:<style>
7: *{8: margin:0px;
9: padding:0px;
Ten: }
11:
: #no1 {: background:#808000;
: width:300px;
: height:300px;
: margin:100px 0 0 100px;
: }
18:
: #no2 {: background:#c0c0c0;
£ º width:150px;
: height:150px;
At : margin-left:20px;
: margin-top:30px;
: }
:</style>
:</head>
28:
:<body>
30:
:<Div id= "no1">
: < Div id= "NO2">Span2</div>
:</div>
34:
:</body>
36:
Panax Notoginseng:</HTML>
If you think this should be the case:
That's a mistake. The result is this:
because there is a margin collapse in the CSS, the boundary collapses or the boundaries overlap. For the top and bottom two parallel div blocks, the above Div's margin-bottom and the following Div's margin-top will collapse, that is, will take the upper and lower margin of the maximum value as a display value, so in this sense: The designers of CSS and browsers hope that when we are in the layout, if we encounter the arrangement of the top and bottom two side content blocks, it is best to set only one of them on each block or down margin . W3school also stipulates that when two vertical margins meet, they will form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.
But in the case of a parent block Div with a sub-block Div, it is explained by another CSS convention, that is, for elements with a block-level child element to calculate the height, if the element has no vertical border and padding, the height is the distance between the top of the child element and the edge of the bottom border . So for the code:
1:<Divclass= "Father"></Div >
Father the height of this div is 0, because there is no content to open the div. If you change to:
1:<Divclass= "Father">I am here. </ Div >
The height is the height of the text, because this time the text is holding this div.
In other words, a DIV and its sub-div attaches special importance to vertical borders or fills, it is like, a pot, inside a basin, can not buckle inside the basin, the main look at the lid, vertical border or fill is this "lid." So there are at least three ways to solve this problem:
1, need to set a border for the parent Div, of course, you can set the border is transparent:
1:border: 1px solid Transparent
2: or
3:Border-top: 1px solid Transparent
2, add padding for the parent Div, or at least add padding-top;
1:padding: 1px
2: or
3:padding-top:1px; / * must be greater than 0*/
3. Add Overflow:hidden for parent Div
1: over-flow:hidden;
Source: http://www.ido321.com/387.html
Problems and Countermeasures: margin collapse of css (collapse)
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
