出现条件：父元素和子元素都设置了margin-top

现象：子元素的margin-top可能会失效，导致父元素和子元素粘连在一起

解决方法：

1.给父元素加padding-top:1px。

2.给父元素加border:1px solid transparent

3.给父元素加float:left

4.给父元素加overflow:hidden（我觉得最好的）

5.给子元素加display:inline-block

[css]当父元素的margin-top碰上子元素的margin-top的更多相关文章

  1. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  2. margin传递，子元素的上下margin会传递给父级

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 父元素高度不确定，子元素左右等高的div布局

    上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...

  4. css实现盒尺寸重置、均匀分布的子元素、截断文本

    盒尺寸重置 重置盒子模型,以便width s和height s并没有受到border 还是padding他们的影响 . CSS文字折断 css实现盒尺寸重置.均匀分布的子元素.截断文本 如何对多行文本 ...

  5. JAVA读取XML文件并解析获取元素、属性值、子元素信息

    JAVA读取XML文件并解析获取元素.属性值.子元素信息 关键字 XML读取  InputStream   DocumentBuilderFactory   Element     Node 前言 最 ...

  6. 原生JavaScript如何解决父元素查找指定类名的子元素的问题

    问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...

  7. jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递

    前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...

  8. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  9. CSS3可伸缩框属性，可用于等分显示子元素或按比例显示子元素的大小

    使用方法跟Android的android:layout_weight属性类似.可类比Android中的使用方法.这样比較好记,因为眼下全部浏览器都不支持大部分的属性,所以全部的属性都须要加上Firef ...

随机推荐

  1. HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容

    今天把一个.NET的网站部署到IIS上打开网页的时候出现了这个错误,刚开始以为是没有配置默认页,但是直接打开固定的页面地址也不行. 于是怀疑是.NET版本的问题,但是看了一下程序的目标框架是4.0没错 ...

  2. 使用xfire工具搭建webservice

    一个简单的项目,下载下来导入可以直接使用 https://yunpan.cn/cY8ANUAYLgy7s  访问密码 99e3

  3. 让我们来简单说说mockjs吧！

    背景: 新接手了一个更新CRM的客户管理项目,负责添加三张活动财务表与操作的模块,接到任务时候,后台还没有做数据,所以用到了假数据,So就是这里所说的mockjs. 介绍: mockjs让前端独立于后 ...

  4. Jmeter学习（一）

    最近测了一个导出功能,感觉应该学习下Jmeter,WEB系统的性能系统还是需要有一定累积. 选择Jmeter而不是LR,很简单的原因是QTP和LR不能装一台机器上. 也有很多测试人员推荐Jmeter, ...

  5. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  6. js时间处理

    // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Dat ...

  7. 关于malloc的一些想法

    之前一段时间翻阅过一些内存分配的资料,这次终于能将其整理记录下来了. c标准库里有两个耳熟能详的函数,用于对堆空间的内存进行分配和释放,它们分别是: malloc.负责分配一个指定大小的一块内存给调用 ...

  8. adb命令学习

    录制屏幕操作Android4.4版本以上支持录制屏幕 adb shell screenrecord /sdcard/demo.mp4 ADB logcat 输出时间信息: adb logcat -v ...

  9. 浅谈android binder机制

    binder机制 是谷歌优化在android上更适合终端的IPC(多进程通信方式),满足系统对通信方式,传输性能和安全性的要求. 特性: 1. 用驱动程序来推进进程间的通信.2. 通过共享内存来提高性 ...

  10. console

    你所不知道的 Console 2016-12-19 ZHANGXIANGLIANG JavaScript 转自 https://segmentfault.com/a/119000000672160 1 ...