Margin-top caused by Div nesting does not work (the Sub-Div sets margin-top, leading to gaps between the parent Div and other elements)

Problem:Solution to the margin-top transfer problem in the nested Div (the Sub-Div sets margin-top, leading to gaps between the parent Div and other elements)

In this browser, there are two nested relationship diV. If the padding value of the parent element of the outer div is 0, the value of the margin-top or margin-bottom of the inner div is "transferred" to the outer Div.

 1   <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  2   <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml" >  3   <  Head  >  4   <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   />  5   <  Title  > Untitled document</  Title  >  6   </  Head  >  7   8   <  Body  >  9   <  Div  Style  = "Background-color: # ff0000; width: 300px; Height: 100px" > Upper Layer </  Div  >  10   11   <  Div  Style  = "Background-color: #009900; width: 300px; Height: 300px; overflow: hidden"  >   <! --  Parent Layer  -->  12        < Div  Style  = "Margin: 50px; Background-color: #000000; width: 200px; Height: 200px"  "  > Child Layer </  Div  >  13   </  Div  >  14   15   </  Body >  16   </  Html  >
 

Cause:Box not obtainedHaslayoutInvalid margin-top

 

Solution:

1. Add overflow: hidden to the parent Div (I recommend this)

2. Change the margin of margin-top to the padding of padding-top;

3. The parent element has a padding with overlapping margins or a border with a width of not 0 and a style of not none.

Parent layer Div plus: padding-top: 1px;

4. Let the parent element generate a block formating context. The following attributes can be implemented:
* Float: left/right
* Position: absolute
* Display: inline-block/table-cell (or other table types)
* Overflow: hidden/auto

  Parent layer Div plus: Position: absolute;

Original article address:Http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html