原因在于：CSS 外边距合并

复现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

html * {

      margin:0;

      padding: 0;

}

</style>

<body>

    <section style = "background:orange;">

        <article style  ='height:100px;margin-top:40px;background:red'></article>

    </section>

</body>

</html>

这里子元素设置margin-top会作用在父元素上了。

解决方法：

1、为父元素设置padding。 
2、为父元素设置border。 
2、为父元素设置 overflow: hidden 。

为什么子元素设置margin-top会作用在父元素上？的更多相关文章

  1. 子元素用margin-top 为什么反而作用在父元素上？对使用margin-top 的元素本身不起作用？

    在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...

  2. 透视 HTML子元素的margin-top样式会应用在父元素上的原由

    情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...

  3. 为什么margin-top不是作用于父元素

    为什么margin-top不是作用于父元素:建议:尽可能的手写代码,可以有效的提高学习效率和深度.至于margin-top属性的基本用法再简单不过,那就是设置一个对象的上外边距,看下面的代码实例: & ...

  4. 为什么margin-top不是作用于父元素【margin外边距合并问题】

    coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...

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

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

  6. css 给inline和inline-block元素设置margin和padding

    经过简单的测试,行内元素或者行内块元素的maring-left,margin-right,padding-left,padding-right都是可以正常表现的,下面来看一下剩下的margin-top ...

  7. 关于IE处理margin和padding值超出父元素高度的问题

    两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让 ...

  8. html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  9. 元素设置float属性后，其后面的元素的位置问题

    分两种情况: .content{ width:350px; height:150px; color:#fff; } .content1,.content2{ background-color: #00 ...

随机推荐

  1. 调用父类构造器：super

    import static java.lang.System.*; class Base{ public String name; public double weight; public Base( ...

  2. Debian use sudo

    刚安装好的Debian默认还没有sudo功能.1.安装sudo# apt-get install sudo2.编辑 /etc/sudoers ,添加如下行# visudoroot ALL=(ALL:A ...

  3. extjs 学习一

    环境 : eclipse  ext  tomcat 6 将下载的extjs  解压后全部 导入到项目中 .使用时 <!-- 1.引入样式 2.引入库文件 ,底层驱动 3. ext-all--&g ...

  4. centos6.5 设置ssh无密码登录

    :关闭防火墙 vim /etc/selinux/config 把SELINUX=enforcing修改为SELINUX=disabled   A机器root连接B机器root用户 (root用户登录) ...

  5. 执行程序---system

    头文件:#include<stdlib.h> 函数原型:int system(const char *command) 参数说明:command被执行的命令,字符串格式 返回值:成功则返回 ...

  6. PetaPoco与SQLite

    PetaPoco与SQLite. 对于精简版本的ORM,PetaPoco确实短小精悍,想做个WPF的Demo,然后将PetaPoco与SQLite集成一起使用,简单易用,是不错的选择. ()==数据库 ...

  7. 2018.09.27 hdu5564Clarke and digits（数位dp+矩阵快速幂）

    传送门 好题啊. 我只会写l,rl,rl,r都很小的情况(然而题上并没有这种数据范围). 但这个dp转移式子可以借鉴. 我们用f[i][j][k]f[i][j][k]f[i][j][k]表示当前在第i ...

  8. 2018.09.10 bzoj1597: [Usaco2008 Mar]土地购买（斜率优化dp）

    传送门 终究还是通宵了啊... 这是一道简单的斜率优化dp. 先对所有土地排序,显然如果有严格小于的两块土地不用考虑小的一块. 于是剩下的土地有一条边单增,另外一条单减. 我们假设a[i]是单减的,b ...

  9. 2018.08.21 bzoj4668: 冷战（并查集+启发式合并）

    传送门 可以发现需要维护连通性和两点连通时间. 前者显然是并查集的常规操作,关键就在于如何维护两点的连通时间. 然后会想到这个时候不能用路径压缩了,因为它会破坏原本树形集合的结构,因此可以启发式按si ...

  10. An existing resource has been found at location D:\Tomcat 7\apache-tomcat-7.0.55\webapps。。。

    这个错误是说你的资源丢失,就是说tomcat无法解析你的.class文件,需要自己重新配置一下. 解决方法: 右击项目名 ---> 点击properties --> 在搜索栏里 输入 WE ...