假设我们有如下代码

  <div id="father" style="height:400px;width:400px;background:#e4393c;">
    <div id="child" style="background:green;height:100px;width:100px;margin-top:40px;"></div>
  </div>

会发现效果如下所示

子元素的margin-top并没有使子元素与父元素分开,反倒效果等同于给父元素加了一个margin-top;

解决的方法也有,具体为:

1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px;)

2.为父元素添加overflow:hidden;

3.为父元素或者子元素生命元素浮动(float:left;可用但是不推荐)

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

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

6.给父元素增加内容生成#father:before{content:' ';display:table};

转载于:https://www.cnblogs.com/gong12339/p/5132343.html

子元素增加margin-top会增加给父元素的问题相关推荐

  1. 【疑点】当子元素全部浮动时,怎么解决父元素塌陷的问题?

    [疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? 参考文章: (1)[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? (2)https://www.cnblogs.com/roashley ...

  2. 当子元素设置position absolute的时,父元素必须设置position属性

    当子元素设置position absolute的时,父元素必须设置position属性.

  3. 深入理解CSS之 如何使子元素撑宽 设置了 block 的父元素

    深入理解CSS之 如何使子元素撑宽 设置了display: block; 的父元素 先写一个模板,晚点再吐槽 吐槽 实现原理 与 更多支持的属性 不想使父级的 块 属性消失怎么办 这种属性规则有什么作 ...

  4. 子元素设置position:fixed,z-index大于父元素依然被父元素盖住

    在项目中遇到一个奇怪的问题,当父元素样式overflow有滚动条.borde-radius存在.position不为static时,和z-index不为auto时,子元素的position就算是fix ...

  5. 关于子元素连续数字和英文内容溢出父元素的问题

    今天在写博客的时候,想写一些代码作为例子进行验证,但是遇到了一个问题.下面是问题代码: <!DOCTYPE html> <html><head><meta c ...

  6. jQuery获取元素上一个、下一个、父元素、子元素

    jQuery获取: jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span") ...

  7. 行内元素设置margin:0 auto无效的问题

    行内元素指的是可在同一行内排列的元素,列举几个常用行内元素:img.input.span.label.a.textarea.button. 通常要给元素设置居中得效果的话,很多人会先想到margin: ...

  8. css笔记(选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影)

    ##css(Cascading Style Sheet) 1.样式引入 行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...

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

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

最新文章

  1. 没想到吧,让你一秒变身纸片人的爆火AI特效,背后还有这么多知识点
  2. spring28: aspectJ--基于xml
  3. ASP.NET中级学习2
  4. Vue 4.0——整合font-awesome解决方案
  5. 完成AOP 顶层设计-CglibAopProxy
  6. 【zookeeper】Zk创建空节点 不带数据的
  7. eclipse 中设置注释模板
  8. AIX 64位内核与32位内核区别
  9. 机器学习之——神经网络模型
  10. MAC 终端打开sublime3
  11. 安装unity3d多个版本共存
  12. linux 系统如何启动服务,如何查看和停止Linux启动的服务
  13. 设计模式(一) 简单工厂模式
  14. Python中._pth文件的作用
  15. Android学习-使用WebView在app上显示网页
  16. .net MVC使用GetOrgChart实现树形关系结构组织架构图
  17. 公众号 多服务器配置_公众号发布的文章越多,涨粉越多吗?
  18. hashtable的解释
  19. Part 1: 3.2 flip flop 触发器寄存器
  20. 分析ERP审单失败,提示:库存不足的原因及应对方案

热门文章

  1. 【HDU - 4509】湫湫系列故事——减肥记II(合并区间模板 or 离散化标记 or 线段树)
  2. div内容居中和布局居中样式总结
  3. EL表达式, JSTL, 获取map集合中key的value
  4. c语言中二维数组的结构体,怎么才能把结构体里面的二维数组打印出来?
  5. leetcode213 打家劫舍II
  6. Linux下的xml文件的创建
  7. 《Python Cookbook 3rd》笔记(3.16):结合时区的日期操作
  8. 为什么人会摆高姿态_Yo , 你为什么喜欢冲浪?
  9. WebLogic域的创建与发布
  10. 紧急不代表重要:管理时间的六个秘密