子元素采用浮动float或者定位position的方式排列。 注意:即使设置父元素的外边距是0,margin: 0,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。 3、空的块级元素 当元素B的margin-top直接贴到元素A的margin-bottom的时候(也就是中间的元素没有内容),也会发生边界折叠。 代码语言:javascript 复制 ...
浮动的块级元素的margin-top和它的第一个浮动块级子元素(floated first in-flow block-level child)的margin-top相邻(如果该元素没有border-top,没有padding-top,并且子元素没有使用清除操作)。 浮动的块级元素的margin-bottom如果符合下列条件,那么它和它的最后一个浮动块级子元素的margin-bottom相邻(如果该元素...
子元素margin-top转移到父元素 如果子元素设置了margin-top/bottom,且父元素没有触发hasLayout,那么子元素的margin就可能转移到父元素。具体表现如下图(父元素虽然设置了background,但并不能覆盖子元素的margin部分;不过父元素高度足够时可以覆盖margin-bottom): hasLayout https://www.cnblogs.com/xiaohuochai/p/48453...
在修改页面样式过程中，遇到子元素设置margin-top，但并未产生预期中的子元素与父元素之间的间隔，反而影响了父元素的样式，导致出现margin-top的效果。此问题需从边距折叠的概念出发进行分析与解决。MDN解释边距折叠现象，即块的上外边距和下外边距合并为单个边距，其大小为两者最大值，该行为称为边距折叠。
1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题。 在给没有margin-top-border父元素中的子元素添加margin-top时,发现没有直接表现出来,而是作用到父元素身上,就会导致子元素的margin-top溢出。 条件: 1、父元素没有上边框 ...
今天在修改页面样式的时候,遇到子元素设置margin-top 但是并没有使得子元素与父元素之间产生间隔,而是作用在了其父元素上,导致父元素产生了一个margin-top...
今天在修改页面样式的时候,遇到子元素设置margin-top 但是并没有使得子元素与父元素之间产生间隔,而是作用在了其父元素上,导致父元素产生了一个margin-top 的效果。 今天就来说说整个问题产生的原因,以及解决方案。 问题分析 在MDN上面有这么一段文字:
今天在修改页面样式的时候,遇到子元素设置margin-top但是并没有使得子元素与父元素之间产生间隔,而是作用在了其父元素上,导致父元素产生了一个margin-top的效果。 今天就来说说整个问题产生的原因,以及解决方案。 问题分析 在MDN上面有这么一段文字: 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折...
方案一:父元素 或者 子元设置display:inline-block ,打破条件一。 方案二:设置父元素padding-top 1 px ,打破条件二。 方案三:设置父元素border-top,打破可穿透条件(可理解为border 为内 容和margin中间的部分(参考盒子模型从内而外: content --> padding --> border --> margin),子元素设置margin后有父元素...
最终效果:会发现在元素上面会有20px的空白,然而我们并没有对父元素设置margin,可见是子元素的 margin-top:20px 影响到了父元素。 二、原因:MDN的文档:如果没有边框border,内边距padding,行内内容,也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界...