<!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. ffmpeg 转码并截图的命令分析

    一.转码并截图的命令分析: 1.转码并截图,将码率转换为900Kffmpeg -i E:\\1.MOV -i E:\\123.jpg -filter_complex overlay=W-w  -b:v ...

  2. struts2生成随机验证码图片

    之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...

  3. 008.MFC_ScrollBar

    滚动条 CScrollBar 水平滚动条控件和垂直滚动条 滚动条消息 SB_THUMBTRACK SB_LINELEFT SB_LINERIGHT SB_PAGELEFT SB_PAGERIGHT 一 ...

  4. 使用 HttpClient 进行表单提交时，遇到的问题

    问题 在开发微信支付的小微商户进件接口时,需要通过表单来上传身份证图片等数据.在微信支付接口文档也说明了,需要使用 multipart/form-data 的方式发送请求..NET 提供了 Multi ...

  5. #mysql查询特定数据库中的所有表名

    #mysql查询特定数据库中的所有表名select table_namefrom information_schema.tableswhere table_schema='smbms' and tab ...

  6. 精选腾讯技术干货200+篇，云加社区全年沙龙PPT免费下载！

    2019年已经过去,小编为大家整理了这一年以来云加社区发布的 200多篇腾讯干货,点击文章标题即可跳转到原文,请速速收藏哦~ 看腾讯技术: 腾讯成本优化黑科技:整机CPU利用率最高提升至90%: 腾讯 ...

  7. 【题解】P1373 小a和uim之大逃离

    [题解]P1373 小a和uim之大逃离 考虑到可能会MLE,考虑状态压缩一下 由于只要得到他们的差就行了,所以直接少记录一维就好了 \(dp(i,j,r,1/0)\)表示在\(i,j\)点,当前ui ...

  8. status100到500http响应对应状态解释

    1xx-信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个1xx响应. 100-继续. 101-切换协议. 2xx-成功 这类状态代码表明服务器成功地接受了客户端请求 ...

  9. html页脚固定在底部的方法

    <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; paddi ...

  10. java基础之----非空判断

    大家好,第一次写博客,一直想写博客,用于自我总结,也用于帮助新同学成长. 平常我们开发的时候,用到很多非空判断,但是很多同学用到的地方不是很准确,这里,我把自己平时遇到的坑跟大家说说.我废话不多,只想 ...