<!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. 一键自动生成 java junit 测试代码神器 gen-test-plugin 入门介绍

    gen-test-plugin 我们日常编写代码的过程中,经常需要为代码编写测试案例. 随着对代码质量的要求越来越高,很多公司开始通过代码的测试覆盖率作为 QA 的一个评定指标. 本框架可以一键生成所 ...

  2. 聊聊最近撸Spring源码感悟

    一.前言     最近一段时间撸了Spring IOC.AOP.Transactional源码,这篇文章聊聊我写了哪些小玩意,这可能就是阅读源码以后最大收获.希望大家在里面能学习一些什么东西吧: 二. ...

  3. CUBA 框架2019年回顾

    对于 CUBA 框架,2019年最重要的事件应该是 CUBA 7 的发布, 这是 CUBA 框架的一次巨大进化,CUBA 7 引入了一系列全新的 UI 和更灵活的数据访问机制,并且发布了基于 Inte ...

  4. Pycharm学生版安装教程（2019-12月更新）

    以下方法全部是官方渠道正版激活,可选择学生版(免费) 或企业版(付费) 我的机器学习教程「美团」算法工程师带你入门机器学习  以及 「三分钟系列」数据结构与算法  已经开始更新了,欢迎大家订阅~这篇专 ...

  5. Autofac总结

    Autofac 介绍|术语 控制反转:IOC和DI IOC 调用者不再创建(不自己new)被调用者的实例,而是交给容器去创建(AutoFac就充当这里的容器),这就是控制反转 控制反转中引入的第三方对 ...

  6. 20191121-9 Scrum立会报告+燃尽图 05

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/10069 一: 组名:组长组 组长:杨天宇 组员:魏新  罗杨美慧  王歆 ...

  7. 大学最新毕业论文参考文献，包含java，jsp，mysql，Android，sql，PHP

    每当毕业论文写到最后需要参考文献时,往往是很令人头疼的,因为有的老师对参考文献的要求是很多的,比如需要国内的和国外的,时间必须是近三年的,满足XXX要求的文献至少需要三篇以上等等.今天我就来给大家整理 ...

  8. $ [Contest \#4]$求和 思博题

    正解: 解题报告: 传送门$QwQ$ 一道看起来是数位$dp$其实并不是的题$QwQ$ 首先求$\sum_{l}^r$就变成$\sum_1^r-\sum_1^{l-1}$不说$QwQ$.现在就只要求$ ...

  9. 洛谷$P1600$ 天天爱跑步 树上差分

    正解:树上差分 解题报告: 传送门$QwQ$! 这题还挺妙的,,,我想了半天才会$kk$ 首先对一条链$S-T$,考虑先将它拆成$S-LCA$和$LCA-T$,分别做.因为总体上来说差不多接下来我就只 ...

  10. 【TCP/IP网络编程】：09套接字的多种可选项

    本篇文章主要介绍了套接字的几个常用配置选项,包括SO_SNDBUF & SO_RCVBUF.SO_REUSEADDR及TCP_NODELAY等. 套接字可选项和I/O缓冲大小 前文关于套接字的 ...