marginCollapse之兄弟关系的DIV
废话不说,直接上图
基本代码如下:

效果图如下:

给两个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的更多相关文章
- margin collapse 之父子关系的DIV
打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了... 关于margin,整理若干知识点如下: 一:父子关系的DIV标签以及未加margin时的 ...
- appium通过同级别(兄弟关系)元素找到元素
在做appium测试用例的时候,要获取金额值,用uiautomatorviewer查看该元素,该元素没有特别明显的个性特点,唯一有特点的定位是有content-desc值,但是该值是变动的,所以无法通 ...
- 浏览器console中加入jquery,测试选择元素
一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery ...
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
- CSS2系列:外边距合并问题(margincollapse)
外边距合并 w3介绍这个问题地址:https://www.w3.org/TR/CSS2/box.html#collapsing-margins 当两个垂直方向外边距相遇,它们将形成一个折叠外边距. 合 ...
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- 最详细的div边距合并的问题和解决方法
对于前端来说写页面是最基础的东西了,但是想不到还是有人不理解边距合并的问题,昨天有网友问我为什么设置的margin不是我设置的实际效果? 好吧,废话不多说,下面来说一下关于margin合并的问题. 解 ...
- Python selenium —— 父子、兄弟、相邻节点定位方式详解
今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...
随机推荐
- mvc5 _ViewStart.cshtml 模板页如何定义
1._Viewstart.cshtml是一个在呈现View文件的时候的启动文件,会在所有View(.cshtml)被执行之前执行,主要用于一些不方便或不能在母版(_Layout.cshtml)中进行的 ...
- Xcode 创建静态库和动态库
1.linux中静态库和动态库区别: 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. 静态库:这类库的名字一般是libxxx.a:利用静态函数库编译成的文件 ...
- SQL四舍五入及两种舍入
round() 遵循四舍五入把原值转化为指定小数位数,如:round(1.45,0) = 1;round(1.55,0)=2floor()向下取整 如:floor(1.45)= 1,floor(1.5 ...
- servlet中中文乱码问题
在web项目中经常回碰到中文乱码的问题,特此整理一下,有不足的地方,希望大家纠正. 1从前台往后台传数据,.以get方式发送请求,发送的参数不乱,但是后台接收到参数乱码 在Tomcat的server. ...
- stringbuffer与stringbuilder的区别?
1. 在执行速度方面的比较:StringBuilder > StringBuffer 2. StringBuffer与StringBuilder,他们是字符串变量,是可改变的对象,每当我们用它们 ...
- MDK5.01百度云下载,安装微软雅黑混合字体,字体效果很棒,解决显示中文的BUG
微软雅黑字体http://pan.baidu.com/s/1nt9Epuh 初步尝试,以前的小BUG都已经解决了.下面是安装雅黑字体后的字体效果,很爽.第一步:安装雅黑字体.第二步:选择Edit--- ...
- C++多继承的观察和7点体会(都是实用派的观点) good
这历来是一个受争议的话题,书上的样板话我就不说了.我只说说自己的一点观察和体会: 1. 多重继承在理论上是有道理,21天学通C++里举了一个例子,就是飞马继承于飞鸟(会飞)和马(会跑),你可以定义一个 ...
- LightOj 1245 --- Harmonic Number (II)找规律
题目链接:http://lightoj.com/volume_showproblem.php?problem=1245 题意就是求 n/i (1<=i<=n) 的取整的和这就是到找规律的题 ...
- 【原创】【Android New Features】—— 关于ADT 17的BuildConfig.DEBUG
在日常开发中,我们使用android.util.Log来打印日志,方便我们的开发调试.但是在打包发布时,需要手工把Log关闭,多少会有些不便,而且不排除打包者忘记关闭Log的情况.那么有没 ...
- 深度学习框架Caffe —— Deep learning in Practice
因工作交接需要, 要将caffe使用方法及整体结构描述清楚. 鉴于也有同学问过我相关内容, 决定在本文中写个简单的tutorial, 方便大家参考. 本文简单的讲几个事情: Caffe能做什么? 为什 ...