原因在于：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. 对FPKM/RPKM以及TPM的理解

    对FPKM/RPKM以及TPM的理解 2018年07月03日 16:05:53 sixu_9days 阅读数:559 标签: FPKM/RPKMTPMRNA-Seq 更多 个人分类: RNA-Seq ...

  2. Ubuntu12.04添加环境变量

    环境变量分为系统级和用户级. 系统级变量设置环境为/etc/environment和/etc/profile等,不要轻易修改,否则可能造成系统错误. 用户级变量设置路径为-/.bashrc和~/.pr ...

  3. python的介绍和及基本的使用

    一 什么是计算机 1 计算机就是由一堆硬件组成的一个机器. 2 硬件的分类: CPU:犹如人类的大脑,运行着需要运行的程序. 内存:将 CPU要运行的内容从硬盘中读取出来,然后CPU在内存里拿内容,只 ...

  4. 2018.07.10 NOIP模拟 sort（单调队列）

    Sort 题目背景 SOURCE:NOIP2016-RZZ-4 T1 题目描述 给你一个长度为 n 的排列,小W每次可以选择一个数,做以下操作: 不断把这个数与它右边的数交换. 当它右边没有数,或它右 ...

  5. Django入门与实践-第25章：Markdown 支持（完结）

    http://127.0.0.1:8000/boards/1/topics/102/reply/ 让我们在文本区域添加 Markdown 支持来改善用户体验. 你会看到要实现这个功能非常简单. 首先, ...

  6. DevExpress TextEdit Focus问题

    在标签切换时设置第一个TextEdit获取输入焦点无效,需要采用消息Post方式设置 //标签切换事件 xtraTabControl1.Selected += (s, e) => { if (e ...

  7. UVa 210 Concurrency Simulator (双端队列+模拟)

    题意:给定n个程序,每种程序有五种操作,分别为 var = constant(赋值),print var (打印), lock, unlock,end. 变量用小写字母表示,初始化为0,为程序所公有( ...

  8. Linux 部署 tomcat 常用命令

    1.  文件夹重命名 mv somedir somedir1 2. 授权所有子目录 chmod -R 777 somedir 3.授权单个目录 chmod 777 somedir 4.实时打印控制台日 ...

  9. 测试mktime和localtime_r性能及优化方法

    // 测试mktime和localtime_r性能及优化方法 // // 编译方法:g++ -g -o x x.cpp或g++ -O2 -o x x.cpp,两种编译方式性能基本相同. // // 结 ...

  10. Android属性动画之ValueAnimator的介绍

    之前两篇博客,介绍的是ObjectAnimator作用与某一个控件的某一个属性.但我们的ValueAnimator它本身并不会作用与任何一个属性,它本身也不会提供任何一种动画.它简单的来说,就是一个数 ...