博客列表 >margin重叠现象

margin重叠现象

指纹指恋的博客
指纹指恋的博客原创
2017年12月12日 20:12:51801浏览

边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

兄弟元素之间发生叠加 

当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图:

wKiom1mj4-biGE_QAAAxTLYQREw10.jpeg-wh_651x-s_80383834.jpeg

父子元素之间发生叠加

子级的上下margin会与父级上下margin重叠,以数值大的为准,而不会相加

QQ20171212-205048.png


解决方案

兄弟元素之间发生叠加 

  • float浮动

  • inline-block

父子元素之间发生叠加

  • 父级加以下三个属性的任意一个:

    • overflow:hidden

    • padding

    • border

  • 子级加position:absolute


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议