影响CSS的margin合并的几个属性
很多人知道，在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:tabledisplay:flexpaddingoverflow:hidden
结语
关于影响margin合并这里没有什么规律，只能通过自己一个一个的去尝试，肯能还有其他文中未提到的属性，可以评论留言。
影响CSS的margin合并的几个属性的更多相关文章
- CSS：布局的三个关键属性：float、position、display
最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...
- css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- margin合并和浮动
1.父子元素margin塌陷问题子元素设置margin-top作用于父元素时, 会产生margin合并问题. 解决方法是: 给父元素的::before伪元素设置为display:table属性, 其中 ...
- CSS的margin属性：详解margin属性
在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...
- margin塌陷和margin合并问题及解决方案
margin塌陷 先举个例子 <style> body{ background-color:#000; } .wrapper{ width:200px; height:200px; bac ...
- 小记css的margin collapsing
近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录 ...
- margin塌陷与margin合并（margin），清除浮动
**1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...
- margin的两个有趣现象：margin合并和margin塌陷
margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...
- CSS中margin边界叠加问题及解决方案(转)
边界叠加简介 边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. ...
随机推荐
- java.io包下适配和装饰模式的使用
如java.io.LineNumberInputStream(deprecated),是装饰模式(decorate)的实现: 如java.io.OutputStreamWriter,是适配器模式(ad ...
- 小米平板2 win10 MIUI互刷教程
在这篇文章中,我们会为大家提供Windows 10版小米平板2刷入MIUI和MIUI版小米平板2刷入Windows 10的两组教程. 不过从Win 10刷MIUI需要用原生安卓系统过渡来统一bios版 ...
- linux系统无法启动或无法登入
修改root权限: https://blog.csdn.net/houjue2298/article/details/78539827 修改密码: https://www.cnblogs.com/we ...
- vue-cli3.0 gui（一）
vue-cli3.0 gui 安装: npm i core-js -g:用于JavaScript的模块化标准库. npm i -g @vue/cli:vue的脚手架工具 运行: vue ui:运行vu ...
- JN_0006：MongoDB未授权访问漏洞处理
开启MongoDB服务时不添加任何参数时,默认是没有权限验证的,登录的用户可以通过默认端口无需密码对数据库任意操作而且可以远程访问数据库. 2.[修复建议]:临时方案:配置AUTH,做好访问认证.打开 ...
- hibernate之Session对象
Session对象:数据库的核心对象 增删改查 ...java public class UserDao { public void addUser(User user) { //使用hibernat ...
- Ubuntu 16.04 总出现红色圆圈警告和检测到系统程序出现问题
这种问题不可忽视!不可忽视!不可忽视!重要的事情说三遍!!!(一次死机,好多文件丢失,真是痛苦的经历) 自从从第三方安装了Python3.6,并将默认3.5改为3.6,导致ubuntu16.04右上角 ...
- MySql常见的数据类型
⒈整型 名称 字节数 tinyint 1 smallint 2 mediumint 3 int/integer 4 bigint 8 特点: 1.如果不设置无符号还是有符号,默认是有符号,如果想设置无 ...
- 数位dp 的简单入门
时间紧张,就不讲那么详细了. 之前一直被深搜代码误解,以为数位dp 其实就是记忆化深搜...(虽说爆搜确实很舒服而且还好想) 但是后来发现数位dp 的标准格式其实是 预处理 + dp ...... 数 ...
- 帆软报表（finereport）图表——扇形图/等弧度的玫瑰图
扇形图/等弧度的玫瑰图,展示的是展示数据所占的比例,需要所有数据的和加起来为1. 下面利用一个实例说明玫瑰图的用法和设置起始角度和终止角度,操作如下: 1.配置一个内置数据集 新增一个等弧度的玫瑰图模 ...