很多人知道，在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. kubernetes之ingress及ingress controller

    什么是ingress Ingress是授权入站连接到达集群服务的规则集合. 从外部流量调度到nodeprot上的service 从service调度到ingress-controller ingres ...

  2. SpringCloud笔记三：Eureka服务注册与发现

    目录 什么是Eureka? Eureka注册的三大步 第一步,引用Maven 第二步,配置yml 第三步,开启Eureka注解 新建Eureka子项目 把provider子项目变成服务端 Eureka ...

  3. [再寄小读者之数学篇](2014-06-22 最大值点处导数为零的应用 [中国科学技术大学2012 年高等数学B考研试题])

    设 $f(x)$ 在 $[0,1]$ 上连续, 在 $(0,1)$ 内可导, 且 $f(0)=f(1)=0$, $f\sex{\cfrac{1}{2}}=1$. 证明:对于任意的实数 $\lm$, 一 ...

  4. [物理学与PDEs]第3章习题5 一维理想磁流体力学方程组的数学结构

    试将一维理想磁流体力学方程组 (5. 10)-(5. 16) 化为一阶拟线性对称双曲组的形式. 解答: 由 (5. 12),(5. 16) 知 $$\beex \bea 0&=\cfrac{\ ...

  5. SSRF漏洞挖掘经验

    SSRF概述 SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外网无法访问 ...

  6. Leetcode#557. Reverse Words in a String III（反转字符串中的单词 III）

    题目描述 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序. 示例 1: 输入: "Let's take LeetCode contest" 输 ...

  7. k64 datasheet学习笔记21--Direct Memory Access Multiplexer (DMAMUX)

    0.前言 本章主要介绍DMA MUX的相关内容 1.简介 1.1 概述 用来路由DMA源到16路DMA通道: 1.2 特性 1.52个外设slot和10个常开slot可以路由到16路DMA通道 2.1 ...

  8. 【easy】215. Kth Largest Element in an Array 第K大的数

    class Solution { public: int quicksort(vector<int>& nums, int start, int end, int k){ int ...

  9. div的onclick事件怎么失效了？

    1 前言 div是用拼接复制到另一个个div上,div的onclick事件中方法名为close,导致onclick=“close()” 触发不了,然后换了名称就可以了 2 代码 <!DOCTYP ...

  10. chromerdriver下载地址:xpath_help

    chrome下载地址 http://npm.taobao.org/mirrors/chromedriver xpath_help https://blog.csdn.net/Cayny/article ...