Home  >  Article  >  Web Front-end  >  Nested divs in HTML, how can the margin style set by the child DIV become the style of the parent DIV_html/css_WEB-ITnose

Nested divs in HTML, how can the margin style set by the child DIV become the style of the parent DIV_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:02:221078browse




定位布局

*{
  margin:0;
  padding:0;
  width:3000px;
}
.box1{
background:#f00;
height:300px;
}
.box{
background:yellow;
height:200px;
}
.box2{
background:#0f0;
height:100px;
width:60px;
margin-top:50px;
}
.box3{
background:#00f;
height:300px;
}
.box4{
background:#888;
height:50px;
width:120px;
}












回复讨论(解决方案)

有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div

u013472677:有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div


为什么呢?感觉就像Bug一样啊

垂直外边距合并问题,建议你看看 http://www.w3school.com.cn/css/css_margin_collapsing.asp
常用解决方法无非是
1.设置父元素的padding-top或者bottom(记得设置padding后要重新计算父元素的高度).
2.给父元素添加属性overflow:hidden
其余还有一些方法不过限制条件有些多, 乱用可能造成更多页面bug,让你疯掉.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:20 excellent foreign Mobile App interface design cases_html/css_WEB-ITnoseNext article:20 excellent foreign Mobile App interface design cases_html/css_WEB-ITnose

Related articles

See more