废话不说,直接上图

基本代码如下:

效果图如下:

给两个div分别加marginBottom和marginTop看一下效果

实际效果如下:

我们可以看出两个div之间的距离并不是50+50,而是只显示了一个50;原因和上一遍文章一样,两个margin值重叠了,并且只显示最大的一个。

解决方案:

  1.两个div中的任意一个加“display:inline-block”;

如果两个div需要横向加margin,如红色的加margin-right,蓝色的加margin-left时的解决方案如下:

  1.两个div同时加float;

  2.两个div同时加“display:inline-block”;(这里有一个小坑:两个div之间的距离会大于两个margin之和,解决方案见inline-block的特点)

如有错误,欢迎纠正。

marginCollapse之兄弟关系的DIV的更多相关文章

  1. margin collapse 之父子关系的DIV

    打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了... 关于margin,整理若干知识点如下: 一:父子关系的DIV标签以及未加margin时的 ...

  2. appium通过同级别(兄弟关系)元素找到元素

    在做appium测试用例的时候,要获取金额值,用uiautomatorviewer查看该元素,该元素没有特别明显的个性特点,唯一有特点的定位是有content-desc值,但是该值是变动的,所以无法通 ...

  3. 浏览器console中加入jquery,测试选择元素

    一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...

  4. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

  5. CSS2系列:外边距合并问题(margincollapse)

    外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合 ...

  6. JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

    利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...

  7. HTML DOM元素关系与操作

    <html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...

  8. 最详细的div边距合并的问题和解决方法

    对于前端来说写页面是最基础的东西了,但是想不到还是有人不理解边距合并的问题,昨天有网友问我为什么设置的margin不是我设置的实际效果? 好吧,废话不多说,下面来说一下关于margin合并的问题. 解 ...

  9. Python selenium —— 父子、兄弟、相邻节点定位方式详解

    今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...

随机推荐

  1. Eclipse环境下配置spket中ExtJS提示

    使用eclipse编写extjs时,一定会用到spket这个插件,spket可以单独当作ide使用,也可以当作eclipse插件使用,我这里是当作eclipse的插件使用的,下面来一步步图解说明如何配 ...

  2. ****Web API 版本控制的几种方式

    个人建议:用content type,即放在Header里面!比如加一个Version:1.4.3 这篇文章写得很好,介绍了三种实现web api版本化的三种方式.我从评论里又收集到两种方式,所以一共 ...

  3. 收缩SQL数据库日志文件

    收缩SQL数据库日志文件 介绍具体的操作方法前,先说下我操作的实际环境和当时的状况.我的服务器是windows server 2008 R2 64位英文版,数据库是SQL server 2008英文版 ...

  4. Could not create the driver from NHibernate.Driver.SQLite20Driver

    使用NHibernate连接Sqlite语句,版本为.net3.5. 升级.net 4.0出现异常,提示”Could not create the driver from NHibernate.Dri ...

  5. Hadoop处理大量小文件的问题和解决方法

    小文件指的是那些size比HDFS的block size(默认64M)小的多的文件.如果在HDFS中存储小文件,那么在HDFS中肯定会含有许许多多这样的小文件(不然就不会用hadoop了).而HDFS ...

  6. RHEL7全新初始化进程管理systemd(图形启动和非图形启动切换)

    红帽RHEL7系统已经替换了大家熟悉的初始化进程System V init,正式采用全新的 初始化进程systemd.初始化进程systemd使用了并发启动机制,所以开机速度上得到了不小的 提升. 将 ...

  7. 【USACO】

    Among the large Wisconsin cattle ranchers, it is customary to brand cows with serial numbers to plea ...

  8. android-HttpClient上传信息(包括图片)到服务端

    需要下载apache公司下的HttpComponents项目下的HTTPCLIENT ----------地址为http://hc.apache.org/downloads.cgi 主要是用到了htt ...

  9. python中的类简单讲解

    类似其它的语言, Python 中的函数使用小括号( () )调用.函数在调用之前必须先定义.如果函数中没有 return 语句, 就会自动返回 None 对象.      Python 是通过引用调 ...

  10. Java 互联网工程师要具备哪些技能或技术?

    Java技术的世界是个无底洞,永远也学不完,不废话了,我就简单的说一下自己的看法(偏重Java方面,什么html.css.js这些不在这次的讨论之内,虽然JavaServer开发有时候也都需要懂点): ...