1.使用padding

2.给父级使用border

3.给父级添加属性 overflow:hidden

4.浮动

5.定位{absolute,fixed}

6.伪元素代码

.parent:before{
content: "";
display: table;
}

父子margin塌陷的更多相关文章

  1. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  2. margin塌陷与margin合并(margin),清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  3. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  4. 6.margin塌陷问题

    当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: <!DOCTYPE html><ht ...

  5. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

  6. 解决margin塌陷和margin合并

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

  7. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

  8. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  9. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

随机推荐

  1. WAS集群系列(5):集群搭建:步骤3:安装IHS软件

    选择"安装IBM HTTPServer"选项,点击"安装向导".例如以下图提示: 安装提示,逐步点击"下一步",当中偶有几处细节注意就可以. ...

  2. 设计模式之Flyweight模式(笔记)

    享元模式:运用共享技术有效地支持大量细粒度的对象. 适用场合:假设一个应用程序适用了大量的对象.而大量的这些对象造成了非常大的存储开销时就应该考虑使用. 首先定义一个IFlyweight接口 publ ...

  3. BZOJ5105: [CodePlus2017]晨跑

    [传送门:BZOJ5105] 简要题意: 给出a,b,c,求a,b,c的最小公倍数 题解: 直接搞(最近刷水题有点心态爆炸) 参考代码: #include<cstdio> #include ...

  4. centos 项目上线shell脚本

    最近在弄项目上线,然后写了个上线,备份,回滚的shell脚本 上线可根据自己公司项目做相关操作,备份回滚可修改目录则可实现 主管要求用shell写,那就用shell写吧 本想Python写更好的 哈哈 ...

  5. mybatis+springmvc+sqlite一个累心的问题:不在纠结

    1 java.sql.SQLException: NYI 2 org.sqlite.RS.getColumnClassName(RS.java:269) 在配置mybatis+springmvc+sq ...

  6. OpenSUSE42.3 leap 开启ssh登陆

    一.产看ssh是否安装 OpenSUSE:~ # rpm -qa | grep ssh libssh2-1-1.4.3-18.3.x86_64openssh-askpass-1.2.4.1-12.1. ...

  7. Python正则表达式初识(二)

    前几天给大家分享了Python正则表达式初识(一),介绍了正则表达式中的三个特殊字符“^”.“.”和“*”,感兴趣的伙伴可以戳进去看看,今天小编继续给大家分享Python正则表达式相关特殊字符知识点. ...

  8. tensorflow学习之路---Session、Variable(变量)和placeholder

    ---恢复内容开始--- 1.Session '''Session.run():首先里面的参数是一个API(函数的接口)的返回值或者是指定参数的值:功能:得知运算结果有两种访问方式:直接建立或者运用w ...

  9. 怎样更好的设计android图标,拉伸不变形等等系列长处,并且减小apk大小

    android mvp框架:dileber(https://github.com/dileber/dileber.git) 继续为大家介绍android mvp开源框架 dileber  今天主要是字 ...

  10. opencms9.0安装

    今天安装opencms 9.0遇到了一些问题,因为是初次安装和使用,导致耽误了非常多时间.所以在此记录一下以备以后借鉴. 首先附上安装步骤链接: http://www.51testing.com/ht ...