margin collapse 之父子关系的DIV

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: |||超大  

margin collapse 之父子关系的DIV

打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了。。。

关于margin,整理若干知识点如下:

一:父子关系的DIV标签以及未加margin时的样式

然后我们给父级和子集都加上margin如下:

实际效果如下:

我们会发现,蓝色的div的marginTop并没有起作用,这个就是所谓的marginCollapse(边界重叠),只计算二者最大的margin值进行显示,之前写CSS的时候也常遇见,却不知道还有这么高大上的名字。。。惭愧。

整理解决方案如下:

1.父div加一个border;

2.父div加一个overflow:hidden;

3.父div加padding;

4.父或子div加float;

5.父且子div加display:inline-block;

6.子div加display:inline-block;

如有遗漏,欢迎补充。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航