<!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. POJ 2976 Dropping tests [二分]

    1.题意:同poj3111,给出一组N个有价值a,重量b的物品,问去除K个之后,剩下的物品的平均值最大能取到多少? 2.分析:二分平均值,注意是去除K个,也就是选取N-K个 3.代码: # inclu ...

  2. python multiprocessing.freeze_support

    Running on windows platform, give me an error as below: File "C:\Python\lib\multiprocessing\for ...

  3. 赋值、关系、逻辑运算、if、switch case

    cout << boolalpha将打印输出0转为false,1转为true 逻辑运算符: &&(与)    且      两个条件为真时结果为真 ||(或) 或   两个 ...

  4. Docker容器Centos容器安装openssh

    前面在部署容器,使用docker容器作为jenkins的Slave节点时,会发现在使用centos作为镜像源拉去容器,不能正常连接,最后是因为centos的sshd的问题 下面专门是centos容器安 ...

  5. mysql主从之配置验证

    实验环境: master  192.168.132.121 主库 slave     192.168.132.122 从库 一 mysql主从复制的配置 1.1 mysql主库给从库复制的权限 mys ...

  6. 【一起学源码-微服务】Nexflix Eureka 源码十二：EurekaServer集群模式源码分析

    前言 前情回顾 上一讲看了Eureka 注册中心的自我保护机制,以及里面提到的bug问题. 哈哈 转眼间都2020年了,这个系列的文章从12.17 一直写到现在,也是不容易哈,每天持续不断学习,输出博 ...

  7. __FILE__,__LINE__,__DATE__,__TIME__,__FUNCTION__的使用

    C/C++ 有5个常用的预定义宏,可以当作变量直接使用 __FILE__,__FUNCTION __,__LINE__,__DATE__,__TIME__. 注意是两个下划线. 其含义如下: __FI ...

  8. Theia架构

    上一篇:Theia——云端和桌面版的IDE 架构概述 本节描述了Theia的整体架构. Theia被设计为一个可以在本地运行的桌面应用程序,也可以在浏览器和远程服务器之间工作.为了支持这两种工作方式, ...

  9. 【Python3爬虫】突破反爬之应对前端反调试手段

    一.前言 在我们爬取某些网站的时候,会想要打开 DevTools 查看元素或者抓包分析,但按下 F12 的时候,却出现了下面这一幕:   此时网页暂停加载,自动跳转到 Source 页面并打开了一个 ...

  10. 12款好用的Visual Studio插件，最后一款良心推荐

    目录 01 CodeMaid 02 Markdown Editor 03 ReSharper 04 GitHub Extension for Visual Studio 05 ZenCoding 06 ...