js margin作用到父元素_子元素的 margin-top 传递给了父元素

我们可能经常碰到这样的情况，给一个child元素加了margin-top，但是没有生效，而是传递到了父元素上。例如下面一段代码：

demo

原因:

这是由于CSS的外边距合并造成的。

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

margin折叠的产生有几个条件：

这些margin都处于普通流中，并在同一个BFC中；

这些margin没有被非空内容、padding、border 或 clear 分隔开；

这些margin在垂直方向上是毗邻的，包括以下几种情况：

1、一个box的top margin与第一个子box的top margin

2、一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下

3、一个box的bottom margin与紧接着的下一个box的top margin

4、一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box

垂直方向上毗邻的box不会发生折叠的情况：

根元素的外边距不会参与折叠

一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottom margin折叠

折叠边距的计算

当两个margin都是正值的时候，取两者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。但必须注意，所有毗邻的margin要一起参与运算，不能分步进行。

更具体的规则请参考这里。

解决方法：

1、修改父元素的高度，增加padding-top样式模拟(padding-top：1px；常用)

2、为父元素添加overflow：hidden；样式即可(完美)

3、为父元素或者子元素声明浮动(float：left；可用)

4、为父元素添加border(border:1px solid )

5、为父元素或者子元素声明绝对定位

js margin作用到父元素_子元素的 margin-top 传递给了父元素相关推荐

VMware找不到父磁盘父虚拟磁盘在子虚拟磁盘创建之后被修改过。父虚拟磁盘的内容 ID 与子虚拟磁盘中对应的父内容 ID 不匹配
在移动VMDK磁盘或者更改操作系统后,往往会出现"VMware找不到父磁盘父虚拟磁盘在子虚拟磁盘创建之后被修改过.父虚拟磁盘的内容 ID 与子虚拟磁盘中对应的父内容 ID 不匹配" ...
MYSQL中的主表和父表_主表，从表，关联表，父表，子表
一.前言在数据库设计中,Hibernate,iBatis等ORM框架的使用中经常听说主键,外键,主表,从表,关联表,父表,子表之类的术语,弄懂它们之前的区别与联系对于数据库设计和ORM框架的学习使用 ...
数组中的元素赋值给元素_漫画：寻找无序数组的第k大元素
本期封面作者:泰勒太乐 ----- 第二天 ----- 题目是什么意思呢?比如给定的无序数组如下: 如果 k=6,也就是要寻找第6大的元素,这个元素是哪一个呢? 显然,数组中第一大的元素是24,第 ...
EasyUI中tree选中父节点自动选中子节点，取消子节点自动取消父节点，子节点勾选完毕自动勾选父节点
今天有需求,将树设为具有全选功能选中父节点自动全选子节点全选状态下,当用户取消某一个子节点,自动取消父节点的勾选未全选状态下,用户勾选全部子节点,自动勾选对应的父节点感觉挺简单,实际写的时候才 ...
vue 父组件、子组件对象改变_VUE里子组件获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...
class 第一个元素_第二章（第3节）：网页元素定位和操作
大家仔细思考一下,我们用 selenium 操控浏览器是什么意思,其实就是用 selenium 模拟人上网,也就是说人用浏览器能做的任何事情,我们用 selenium 都可以做,selenium 就如 ...
java查找链表中间元素_如何通过Java单次查找链表的中间元素
java查找链表中间元素您如何一次找到LinkedList的中间元素是一个编程问题,在电话采访中经常问Java和非Java程序员. 这个问题类似于检查回文或计算阶乘 ,有时Interviewer还 ...
java 查找链表中间元素_java查找链表中间元素_如何通过Java单次查找链表的中间元素...
java查找链表中间元素您如何一次找到LinkedList的中间元素是一个编程问题,在电话采访中经常问Java和非Java程序员. 这个问题类似于检查回文或计算阶乘 ,有时Interviewer还 ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
delphi 子接口是否实现父接口_您可以从子类接口的接口调用父接口的默认方法吗？...
在Java 8中,我有类似以下内容: package test; public class SimpleFuncInterfaceTest { public static void carryOutW ...

js margin作用到父元素_子元素的 margin-top 传递给了父元素

js margin作用到父元素_子元素的 margin-top 传递给了父元素相关推荐

最新文章

热门文章