最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑。唉,有些东西不用就忘。

一、问题描述

<div class="container">
<div class="children">子元素</div>
</div>
.container {
background-color: rgb(226, 43, 89);
}
.children {
background-color: rgb(228, 131, 12);
margin-top: 20px;
}

最终效果:会发现在元素上面会有20px的空白,然而我们并没有对父元素设置margin,可见是子元素的 margin-top:20px 影响到了父元素。

二、原因:MDN的文档:如果没有边框border,内边距padding,行内内容,也没有创建块级格式上下文清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top;或没有边框,内边距,行内内容,高度height,最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom,则就会出现父块元素和其内后代块元素外边界重叠,重叠部分最终会溢出到父级块元素外面。

三、简单的解决方案:

1、父元素加border。emmm,这样会多加border的宽度。

2、父元素overflow:auto。(比较喜欢这种。)

3、设置父元素的display为flex或inline-block。

4、使用绝对定位。

5、愿意的话可以在父元素子元素之间再加一个div咯。

CSSmargin击穿问题(子元素margin-top会影响父元素)的更多相关文章

  1. 子元素设定margin值会影响父元素

    有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...

  2. 子元素margin-top为何会影响父元素?

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  3. 子元素的margin-top会影响父元素

    ---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...

  4. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  5. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  6. 布局时margin会影响父元素

    布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...

  7. 当fixed元素相互嵌套时,父元素会影响子元素的层叠关系,最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  8. Atitit.判断元素是否显示隐藏在父元素 overflow

    Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop  指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素  $(next) ...

  9. margin-top影响父元素定位

    写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...

  10. 给HTML页面指定元素添加属性,添加父元素

    给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img   此处用到querySelectorA ...

随机推荐

  1. Spring Cloud正式移除Hystrix、Zuul等Netflix OSS组件

    1. 前言 2020-12-22日Spring官方博客宣布,Spring Cloud 2020.0.0正式发布.2020.0.0是第一个使用新的版本号命名方案的Spring Cloud发行版本.在此之 ...

  2. ATT&CK实战系列——红队实战(二)

    一.环境搭建 靶场下载地址:http://vulnstack.qiyuanxuetang.net/vuln/detail/3/ DC IP:10.10.10.10OS:Windows 2012应用:A ...

  3. ribbon源码分析

    对于ribbon的使用我们只需要在RestTemplate的申明上面加上 @LoadBalanced 注解之后那么这个RestTemplate就具有了负载均衡的功能 ribbon是怎么实现这一功能的? ...

  4. SecureCRT SSH Linux中不显示彩色 字体颜色、文件夹和文件显示的颜色区别开解决办法

    SecureCRT SSH Linux中不显示彩色 字体颜色.文件夹和文件显示的颜色区别开解决办法 实验环境: 刚开始我的情况是这样的:带颜色的显示不出来,然后还能看到,此处有内容,猜测是Secure ...

  5. 一步步教你:如何用Qemu来模拟ARM系统

    这是道哥的第011篇原创 目录 前言 为什么需要ARM模拟系统 应用程序的开发 系统开发(BSP) Qemu是什么? Qemu的两种模式 Qemu 能做什么?或者说适合做什么? 在 Ubuntu16. ...

  6. 什么是ZooKeeper?ZooKeeper分布式事务详解

    前言 上一章我们了解了zookeeper到底是什么,这一章重点来看zookeeper当初到底面临什么问题? 而zookeeper又是如何解决这些问题的? 实际上zookeeper主要就是解决分布式环境 ...

  7. springMVC框架配置定时器

    在springmvc.xml添加如下内容在xmlns中添加 xmlns:task="http://www.springframework.org/schema/task"1在xsi ...

  8. flowable流程启动时监听器

    一.核心配置类 package com.magus.project.flow.config; import com.google.common.collect.Maps; import com.mag ...

  9. ArrayList之SubList源码解析

    subList是ArrayList的内部类, public List<E> subList(int fromIndex, int toIndex) { subListRangeCheck( ...

  10. sklearn中的SGDClassifier

    常用于大规模稀疏机器学习问题上 1.优点: 高效 简单 2.可以选择损失函数 loss="hinge": (soft-margin)线性SVM. loss="modifi ...