美文网首页
margin重叠

margin重叠

作者: dadadahui | 来源:发表于2016-08-23 13:57 被阅读164次

通常特性:
1.block水平元素(不包括float和absolute元素)
2.不考虑writing-mode,只发生在垂直方向(margin-top、margin-bottom)


三种情境:
1.相邻的兄弟元素
2.父级和第一个/最后一个子元素
3.空的block元素 自己和自己


1.相邻的兄弟元素 margin重叠


2父级和第一个/最后一个子元素


margin-top:
father 0,son 80,重叠一下,80
father 80,son 80 ,重叠一下,80


2.1父子元素margin-top发生重叠,原因?如何取消重叠?

1.父元素非块状格式化上下文元素

2.父元素没有border-top设置

3.父元素没有padding-top值

4.父元素和第一个子元素之间没有inline元素(图片。。文字。。。)分割


margin-bottom重叠的原因:
1.父元素非块状格式化上下文元素
2.父元素没有border-bottom设置
3.父元素没有padding-bottom值
4.父元素和最后一个子元素之间没有inline元素分割
5.父元素没有height、min-height、max-height限制


3.空block元素margin重叠


margin重叠的计算规则

1.正正取大值


2.正负值相加
3.负负最负值



垂直布局时,margin-top和margin-bottom都使用

http://www.imooc.com/video/12103

相关文章

  • margin重叠

    通常特性:1.block水平元素(不包括float和absolute元素)2.不考虑writing-mode,只发...

  • CSS理解之margin

    1.margin与百分比单位 2.margin重叠 margin重叠通常特性: 只发生在block水平元素(例如:...

  • BFC margin重叠

    BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染...

  • margin重叠问题

    一.什么是margin重叠现象 当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高...

  • margin 重叠问题

    在网页制作中我们经常用到margin属性,但我们有没有注意到在设置 margin 属性时会存在重叠问题呢?我们来看...

  • 3.CSS布局篇之margin纵向重叠问题

    先说结论:相邻元素的margin-top和margin-bottom会发生重叠,空白内容的标签也会重叠

  • CSS Margin塌陷(重叠)

    1、什么是“ Margin塌陷(重叠) ”? 在标准文档流中,竖直方向(是竖直方向,水平方向的不会出现塌陷现象)的...

  • CSS中常见兼容性问题及解决方案

    一、margin问题 1. 上下margin重叠问题,即给相邻的两个div设置margin-bottom和ma...

  • 盒子模型基本设置

    内边距:padding 外边距:margin 外边距重叠:外边距重叠.png 浮动:float 内联元素浮动: 内...

  • margin-外边距重叠

    外边距重叠就是margin-collapse。 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外...

网友评论

      本文标题:margin重叠

      本文链接:https://www.haomeiwen.com/subject/msagsttx.html