之前在使用经常遇到下面的问题:

html:

 <div class="top">
<div class="one">I'm the first!</div>
<div class="two">I'm the second!</div>
</div>

css:

        .one{
width: 100px;
height: 100px;
background: red;
margin-top:20px;
}
.two{
width:100px;
height:100px;
background:blue;
}
.top{
width:200px;
height:300px;
background:gray;
}

显示结果:

.one与.top之间并没有实现margin-top的效果,这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。两个相邻的margin之间如果没有明确的界限(padding、border),则会发生重叠,重叠后相应的margin为较大的那个,上图中第二个div的margin-top与第一个div的margin-bottom之间没有界限,所以one的margin-bottom与two的margin-top重叠了,它们之间只有一个margin的距离,而父标签top的margin-top与one的margin-top之间也没有界限,所以两者也会重合,因为top的margin-top为0小于one的margin-top值,所以重叠后的值为后者。

解决方法:

1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;添加界限) 
2、为父元素添加overflow:hidden;样式即可(让父元素成为BFC,内部布局不受外部影响) 
3、为父元素或者子元素声明浮动(浮动元素的margin垂直方向不叠加) 
4、为父元素添加border(添加界限) 
5、为父元素或者子元素声明绝对定位(BFC)

关于css中父元素与子元素之间margin-top的问题的更多相关文章

  1. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  2. C#中父窗口和子窗口之间实现控件互操作

    很多人都苦恼于如何在子窗体中操作主窗体上的控件,或者在主窗体中操作子窗体上的控件.相比较而言,后面稍微简单一些,只要在主窗体中创建子窗体的时候,保留所创建子窗体对象即可. 下面重点介绍前一种,目前常见 ...

  3. css设置时父元素随子元素margin值移动

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...

  4. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  5. 父元素与子元素之间的margin-top问题(css hack)

    hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. hytml代码: &l ...

  6. 父元素与子元素之间的margin-top问题(css hack)(转载)

    情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...

  7. CSS 实现:父元素包含子元素,子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  8. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  9. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

随机推荐

  1. RobotFramework教程使用笔记——RIDE的相关知识及Resources创建关键字文件

    RIDE是robotframework的图形操作前端,我们在RIDE上进行测试用例设计和编写测试脚本,并执行自动化测试.下面来全面的认识下这个操作工具. 在右边编辑页面有三大模块,Edit,TextE ...

  2. java后台获取cookie里面值得方法

    String admissionNo = ""; //得到所有的cookies Cookie[] cookies = this.getRequest().getCookies(); ...

  3. C#入门---2、C#装备知识(C#创建桌面程序的时候创建的是什么应用程序)

    C#入门---2.C#装备知识(C#创建桌面程序的时候创建的是什么应用程序) 一.总结 一句话总结: WPF应用程序:来替代 WindowsFroms 来创建桌面应用程序 1.什么是控制台程序 Con ...

  4. css 鼠标移入边框填充效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 【C++】私有数据成员不能用对象去访问吗

    首先,必须清楚的是private和public限定的是类而不是对象.因此,在成员函数中访问同类对象的私有成员是完全可以的. 所以,某些教材上所说的“私有数据成员不能用对象去访问”是欠妥当的. 比如,如 ...

  6. 详解linux中install命令和cp命令的区别

    基本上,在Makefile里会用到install,其他地方会用cp命令. 它们完成同样的任务——拷贝文件,它们之间的区别主要如下: .最重要的一点,如果目标文件存在,cp会先清空文件后往里写入新文件, ...

  7. C++之萃取技术(traits)

    为什么需要类型萃取(特化) 前面我们提到了迭代器,它是一个行为类似于smart pointer之类的东西,主要用于对STL容器中的对象进行访问,而且不暴露容器中的内部结构,而迭代器所指对象的型别称为该 ...

  8. HDU2444(二分图判定+最大匹配)

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  9. 3.sql中的向上递归和向下递归

    1.向下递归 select * from table_name where 条件 connect by prior bmbm(本级关联条件)=sjbmbm(上级关联条件) start with bmb ...

  10. GitHub---github入门

    setup git --- create a repository-----fork a repository -- a pull request (be social)