<!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. C语言图形界面常用函数集锦

    (以下函数均应在图形方式初始之后使用(initgraph(a,b)),在win-tc中使用BGI图形程序模板时,其中已经定义有一个initgr函数,在main函数中应在执行initgr函数之后再使用这 ...

  2. Java中的选择结构

    1.if选择结构 if选择结构是根据条件判断之后再做处理的一种语法结构 语法: if(条件){ 代码块 //条件成立之后要执行的代码,可以是一条语句,也可以是一组语句 } if后小括号里的条件是一个表 ...

  3. 洛谷$P$2235 $Kathy$函数 $[HNOI2002]$ 数位$dp$

    正解:数位$dp$ 解题报告: 传送门$qwq$ $HNOI$的题从02年就这么神了嘛$QAQ$,,, 嗷对了这题如果看出了一个结论就是个数位$dp$板子,,,?但是结论很神我$jio$得挺难看出来的 ...

  4. KafkaProducer Sender 线程详解（含详细的执行流程图）

    目录 1.Sender 线程详解 2.RecordAccumulator 核心方法详解 温馨提示:本文基于 Kafka 2.2.1 版本. 上文 <源码分析 Kafka 消息发送流程> 已 ...

  5. 手算CRC及其实现

    前言: 这篇文章主要讲的是如何手算CRC以及运用CRC,更侧重方法的步骤,对原理方面不做探讨. 方法也是按照我个人理解的来,所以并不专业~ 一些搬过来的代码我也修改了一下下 如果想了解原理的可参考资料 ...

  6. matplotlib绘制符合论文要求的图片

    最近需要将实验数据画图出来,由于使用python进行实验,自然使用到了matplotlib来作图. 下面的代码可以作为画图的模板代码,代码中有详细注释,可根据需要进行更改. # -*- coding: ...

  7. MySQL数据库保存emoji表情

    何为emoji表情?这里的全是. MySQL数据库为什么不能存储emoji?不是MySQL不能,而是MySQL的utf8编码不能!原来MySQL下的utf8编码每个字符占3个字节,而emoji占4个字 ...

  8. Go Web 编程之 请求

    概述 前面我们学习了处理器和处理器函数,如何编写和注册处理器.本文我们将学习如何从请求中获取信息. 请求的结构 通过前面的学习,我们知道处理器函数需要符合下面的签名: func (w http.Res ...

  9. SpringBoot 2.x 开发案例之 Shiro 整合 Redis

    前言 前段时间做了一个图床的小项目,安全框架使用的是Shiro.为了使用户7x24小时访问,决定把项目由单机升级为集群部署架构.但是安全框架shiro只有单机存储的SessionDao,尽管Shrio ...

  10. EntityFramework Core表名原理解析，让我来，揭开你神秘的面纱

    前言 上一节我们针对最开始抛出的异常只是进行了浅尝辄止的解析,是不是有点意犹未尽的感觉,是的,我也有这种感觉,看到这里相信您和我会有一些疑惑,要是我们接下来通过注解.Fluent APi.DbSet分 ...