<!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. Channel 9视频整理【2】

    JadeChang https://channel9.msdn.com/Niners/JadeChang 繁体中文视频 2016 Nano Server / Docker / Containers 打 ...

  2. boostrap-非常好用但是容易让人忽略的地方【1】：modal

    使用bootstrap框架好久了,在开发中也用到了或者遇到了很多的问题,所以跟大家分享一下 bootstrap modal 组件的样式 .modal-lg .modal-sm 说明:这个是bootst ...

  3. 16.MindManager整理交互思路

    点住主题同时按ins键可以插入一个支节点 右键主题选择下方的排列图表 可以选择排列方式 按住主题同时ctr+v就会粘帖成一个子主题 文本也可以复制黏贴 主题内容可以直接选择拖动更改结构 选择主题框上的 ...

  4. Spring MVC拦截器配置

    Spring MVC拦截器配置 (1)自定义拦截器 package learnspringboot.xiao.other; import org.springframework.web.servlet ...

  5. Linux 学习笔记 2 Centos 安装与网络的配置以及VI编辑器的使用

    前言 当然,还是觉得Centos 在众多的Linux 发行版中,还是很有地位的,好多的服务器大多沿用的都是一代的Centos 因为它开源(这是废话)而且稳定,这才是服务器沿用的最重要的一项指标. 镜像 ...

  6. docker练习-群

    了解Swarm集群 群集是一组运行Docker并加入群集的计算机.在此之后,继续运行使用的Docker命令,但现在它们由群集管理器在群集上执行.群中的机器可以是物理的或虚拟的.加入群组后,它们被称为节 ...

  7. Linux下安装oracle提示INS-20802 Oracle Net Configuration Assistant

    安装oracle的时候,在最后install过程中,突然弹出INS-20802 :Oracle Net Configuration Assistant 错误. 查了一些资料,也尝试了很多,但是最终尝试 ...

  8. 利用SSH桥接访问服务器的Docker运行的MySql服务

    前情提要 docker的运用越来广泛,许多IT公司都已经将自己的服务跑在Docker上面.在安全性方面又做了一层防护.比如:跑在Docker上的Mysql不做外网端口映射,只能在linux服务器上或进 ...

  9. 解决apt-get命令出现的安装源错误

    首先linux环境下打开网页,输入上网账号密码,确保已经联网 直接安装软件或库的时候,在管理员模式下,在终端输入:apt-get install A可以自动安装A 有时会出现下面的安装源错误 这是因为 ...

  10. Python保存时提示“SyntaxError: Non-ASCII character '\xe8' in file”

    原因 Python 默认的是ASCII 编码方式,如果出现中文会出现问题,所哟必须在代码的第二行或第一行 显示的声明编码方式(已注释的方式,即"#"开始) 解决方法 在文件头部加上 ...