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的特点)

如有错误,欢迎纠正。

时间: 2024-08-30 16:33:42

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

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

在做appium测试用例的时候,要获取金额值,用uiautomatorviewer查看该元素,该元素没有特别明显的个性特点,唯一有特点的定位是有content-desc值,但是该值是变动的,所以无法通该元素自身特点来找到该元素.元素如下图: 既然无法通过自身查找元素,发现也无法通过上一级元素定位,后面发现底部的按钮“我的资产(元)”算是这个页面比较有特殊的,并且肯定能定位到的,再查看“我的资产(元)”元素和金额元素是同一个级别的,这样就能通过xpath的兄弟关系找到金额元素,关系如下: 怎样通过

JQuery 添加删除元素

<body><ul><ul/> <div><div></body> 1. 内部添加        加上去是父子关系 append  加到后面    prepend 加到前面 let li = $(“<li>我是内部添加</li>”) $("ul").append(li); 2. 外部添加    加上去是兄弟关系 let div = $(“<div>我是外部添加</div&g

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

一.chrome浏览器F12打开调试界面,在console中输入(firefox同样可以): var jquery = document.createElement('script'); jquery.src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js";//若调试页面是https的这里也修改为https. document.getElementsByTagName('head')[0].appendChild(jq

Html div和span详解

div和span的区别 div: div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. Span: span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式. div和 span元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表. 比如:代码: <html> <head&

jquery js 兄弟父元素的获取

jQuery提供的方法 上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点 children(selector) 返回所有的子节点,不过该方法只会返回直接的子节点,不会返回所有的子孙节点 prev() 返回该节点的上一个兄弟节点 prevAll() 返回该节点之前所有的节点 next()

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

利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对象 * 2.getElementsByName(): 通过标签中的name属性值来获取该标签对象集合 * 3.getElementsByTagName(): 通过标签名来获取该标签对象集合 现在来看看相对获取的方式: ※※二.相对获取(利用节点之间的层次关系),获取节点:-Node 1.父节点:pa

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

今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点.定位一个节点的哥哥节点就一筹莫展了,别急,且看博主一步步讲解. 1. 由父节点定位子节点最简单的肯定就是由父节点定位子节点了,我们有很多方法可以定位,下面上个例子: 对以下代码: <html> <body> <div id="A"> <!--父节点

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

对于前端来说写页面是最基础的东西了,但是想不到还是有人不理解边距合并的问题,昨天有网友问我为什么设置的margin不是我设置的实际效果? 好吧,废话不多说,下面来说一下关于margin合并的问题. 解决margin合并的方法有好多种: 首先说一下嵌套关系的margin合并问题. 1.给父元素添加padding-top值和padding-bottom值 2.给父元素添加border值 3.给父元素添加属性overflow:hidden 4.给父元素或者子元素声明浮动float 5.给父元素添加属性

datePiker弹出框被其他div遮挡

最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular指令,在网上找了好多例子,有直接修改css的,也有在options添加zIndexOffset的,这样对于我的项目都不适用. 后来查看datepiker的源码,发现其z-index是在其父div的基础上+1.这样就不难发现,只要将其父div的z-index设置的合适就不会出现遮挡问题.下面附上对z-index