首頁 > web前端 > html教學 > margin collapse 之父子关系的DIV_html/css_WEB-ITnose

margin collapse 之父子关系的DIV_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:41:13
原創
1236 人瀏覽過

 

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

 

关于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;

如有遗漏,欢迎补充。

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板