很多人知道，在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. 越光后端开发——ygapi（3.引入xadmin）

    1.引入xadmin 1.将xadmin文件夹放入extra_apps目录下: 2.在每个app下新建adminx.py 1.apps/users/目录下新建adminx.py: import xad ...

  2. Day038--Python--Gevent , IO多路复用

    1. 协程: gevent  (遇到IO自动切换) import gevent import time from gevent import monkey; monkey.patch_all() # ...

  3. zkclient中包引用不对，导致NoSuchMethodError

    nidonglin commented on 31 Oct 2014 Exception in thread "main" java.lang.NoSuchMethodError: ...

  4. Elasticsearch 6.4基本操作 - Java版

    1. Elasticsearch Java API有四类client连接方式 TransportClient RestClient Jest Spring Data Elasticsearch 其中T ...

  5. springBoot总结

    springBoot总结: ssm基本的依赖: <dependencies> <!--添加依赖thymeleaf 可以访问html页面--> <!--<depend ...

  6. Codeforces 1101G(线性基)

    题目链接 题意 将序列尽可能分成多段使得任意$x \geq 1$段内的所有元素的异或和大于$0$问最多多少段 思路 首先,如果所有元素异或和等于$0$答案显然为$-1$,否则构造整个序列的线性基,这个 ...

  7. 第四周结对项目总结及改进（ui/web）

    项目介绍 随着社会科技的进步和多媒体教育的日益发展,越来越来的学生正在接受着新时代下的教育模式,而且手机.电脑等科技产品的普及以及其带来的更高效更便捷的模式 使得它们成为当代学生学习中的一种很好的学习 ...

  8. 【Java编程思想笔记】反射

    文章参考:学习网站 how2java.cn 参考博客:(敬业的小码哥)https://blog.csdn.net/sinat_38259539/article/details/71799078 (青色 ...

  9. c++基础学习

    1.输入输出函数(cout,cin) #include<iostream> int main() { using namespace std; cout<<"Come ...

  10. Intsall The Nessus in you kali linux

    1.first you shold download the nessus on the web station the nessus download site url:  https://www. ...