<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .repeat1{

                 width: 200px;

                 height: 200px;

                 background-color: yellowgreen;

                 margin-bottom: 20px;

                 /*margin底部20px;*/

             }

             .repeat2{

                 width: 200px;

                 height: 200px;

                 background-color: yellow;

                 margin-top: 10px;

                 /*margin顶部10px;*/

             }

             /*margin重叠问题:两个盒子margin交接的部分以两个盒子中margin值最大的为准，所以不会产生两个盒子交界处的margin值叠加*/

         </style>

     </head>

     <body>

         <div class="repeat1"></div>

         <div class="repeat2"></div>

     </body>

 </html>

CSS-16-margin值重叠问题的更多相关文章

  1. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  2. css中margin上下外边距重叠问题

    css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin, ...

  3. 须知的css——margin不重叠的情形

    margin重叠 摘自css2.1规范中文版 CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin.Margin按这种方式结合叫重叠(collapse),产生的 ...

  4. 问题与对策：CSS的margin塌陷（collapse）

    1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...

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

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

  6. CSS的margin属性：详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...

  7. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  8. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

  9. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

随机推荐

  1. 30分钟全方位了解阿里云Elasticsearch（附公开课完整视频）

    摘要: 阿里云Elasticsearch提供100%兼容开源Elasticsearch的功能,以及Security.Machine Learning.Graph.APM等商业功能,致力于数据分析.数据 ...

  2. FreeNOS学习3——了解目录结构和Main函数

    下载源码的文件夹,看到里面有以下内容: 解释一下里面都有啥 lib -> 共享代码 1.libfs 文件系统(磁盘管理) 2.liballoc 内存分配和虚拟内存映射(内存管理) 3.libex ...

  3. 看demo1

    http://pytorch-cn.readthedocs.io/zh/latest/package_references/torch/ pytorch文档 1.json JSON(JavaScrip ...

  4. 基于python的分治法和例题

    分治法 分治法的核心 分:将一个复杂的问题分成两个或更多的相同或相似的子问题,再把子问题分成更小的子问题 治:最后的子问题,可以很容易的直接求解 合:所有子问题的解合并起来就是原问题的解 分治法的特征 ...

  5. .NetCore集成Dapr踩坑经历

    该篇内容由个人博客点击跳转同步更新!转载请注明出处 前言 之前自己有个core2.2的项目一直是用的Surging作为微服务框架的,后来了解到了Dapr,发现比较轻量级,开发部署等也非常方便,故将自己 ...

  6. Hadoop集群分布式安装

    一 整体介绍 1.1 硬件环境 本文使用三台服务器搭建hadoop集群,使用Centos7.5系统,服务器均有独立ip 1.2 部署的软件 部署服务:namenode(HA),resourcemana ...

  7. Java 从入门到进阶之路（二十）

    在之前的文章我们介绍了一下 Java 中的包装类,本章我们来看一下 Java 中的日期操作. 在我们日常编程中,日期使我们非常常用的一个操作,比如读写日期,输出日志等,那接下来我们就看一下 Java ...

  8. IDEA永久激活使用

    前言 今一早一打开IDEA发现秘钥到期了,提示秘钥被取消,不能用了,因为之前也是从网站找的秘钥,所以失效也是情理当中的,所以绞尽脑汁网上找各种破解方法,结果却是被我找到了,这里和大家分享下. 破解步骤 ...

  9. Java AOP的底层实现原理

    Java AOP的底层实现原理 一.什么是AOP 1.AOP:Aspect Oriented Programming(面向切面编程),OOP是面向对象编程,AOP是在OOP基础之上的一种更高级的设计思 ...

  10. linux下安装cmake方法（2）---直接用命令安装

    1.linux环境下打开网页,输入上网账号密码,确保已经联网 2.打开终端:输入cmake --version,如果出现版本号,表明已经安装,如果显示没有安装cmake,则需要安装 3.在终端里输入: ...