很多人知道，在CSS中存在Margin合并的现象，比如下代码：

<style>

div {

	margin:10px;

	height:100px;

	background:red;

}

</style>

<body>

	<div></div>

	<div></div>

</body>

在这里的两个div之间的margin值不是20px而是10px，那么需要怎么才能取消这种margin合并的现象呢？有很多个属性可以做到，但是这些属性并没有什么规律，所以只在这里列举出来，不做解释。

  • 使用border(注意outline不可以，因为outline不占位置)
  • display:table
  • display:flex
  • padding
  • overflow:hidden

结语

关于影响margin合并这里没有什么规律，只能通过自己一个一个的去尝试，肯能还有其他文中未提到的属性，可以评论留言。

影响CSS的margin合并的几个属性的更多相关文章

  1. CSS：布局的三个关键属性：float、position、display

    最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...

  2. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  3. margin合并和浮动

    1.父子元素margin塌陷问题子元素设置margin-top作用于父元素时, 会产生margin合并问题. 解决方法是: 给父元素的::before伪元素设置为display:table属性, 其中 ...

  4. CSS的margin属性：详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...

  5. margin塌陷和margin合并问题及解决方案

    margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...

  6. 小记css的margin collapsing

    近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录 ...

  7. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

  8. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  9. CSS中margin边界叠加问题及解决方案(转)

    边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...

随机推荐

  1. Java基础 -- 访问控制权限

    一  包:库单元 假设我们存在两个类名相同的类,如果没有一定的措施对其进行区分,就会无法区别到底使用的是哪一个类.因此java引入了包来进行名字空间管理. 包(类库)包含有一组类,这些类在单一的名字空 ...

  2. Slow ReadProcessor&amp;Error Slow BlockReceiver错误日志分析(转)

    1.总结 "Slow ReadProcessor" 和"Slow BlockReceiver"往往是因为集群负载比较高或者某些节点不健康导致的,本文主要是帮助你 ...

  3. 响应式bootstrap - demo

    参考资料: bootstrap:http://www.bootcss.com/ 汤姆大叔的博客: <深入理解Bootstrap>http://item.jd.com/11462962.ht ...

  4. linux下堆溢出unlink的一个简单例子及利用

    最近认真学习了下linux下堆的管理及堆溢出利用,做下笔记:作者作为初学者,如果有什么写的不对的地方而您又碰巧看到,欢迎指正. 本文用到的例子下载链接https://github.com/ctfs/w ...

  5. Linux 首先基本包安装(vim啊什么的),源,源优化,项目架构介绍, (LNMuWsgi)Django项目相关软件mysql,redies,python(相关模块)安装配置测试

    内容 补充: 查看已启动服务的端口 netstat -tulnp |grep (方式1) ss -tulnp|grep (方式2) 前期铺垫: . Linux要能上网 . 掌握Linux软件包安装方法 ...

  6. ubuntu 32/64 bit

    https://askubuntu.com/questions/454253/how-to-run-32-bit-app-in-ubuntu-64-bit how to run 32-bit app ...

  7. 【原创】大叔经验分享（12）如何程序化kill提交到spark thrift上的sql

    spark 2.1.1 hive正在执行中的sql可以很容易的中止,因为可以从console输出中拿到当前在yarn上的application id,然后就可以kill任务, WARNING: Hiv ...

  8. 【原创】大叔问题定位分享（14）Kylin频繁OOM问题

    公司一个kylin集群,每到周二下午就会逐个节点OOM退出,非常有规律,kylin集群5个节点,每个节点分配的内存已经不断增加到70多G,但是问题依旧: 经排查发现,每周二下午kylin集群的请求量确 ...

  9. 使用Python正则表达式自己实现解析URL各参数

    不使用库,自己可以利用正则表达式实现解析域名各部分参数:协议.域名.端口.路径.载荷等. 使用的正则表达式如下: r'''(?x)\A ([a-z][a-z0-9+\-.]*):// # Scheme ...

  10. JAVA 实现 简单的 HTTP服务器

    关于JAVA的HTTP服务器的简单实现,还望大家给出宝贵建议,谢谢. 1.首先来说下HTTP所有的状态碼,相信对于网页开发的博友们,肯定不陌生. 状态码 状态码英文名称 中文描述 100 Contin ...