相邻元素margin的自动合并与float的坑
css中相邻元素的margin其实是会自动合并的，且取较大值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.div1 {
width: 60px;
height: 60px;
background-color: #fdd;
border: 10px solid #fee;
padding: 20px;
margin: 30px;
/*设置上下margin为30px*/
}
.div2 {
width: 60px;
height: 60px;
background-color: #fdd;
border: 10px solid #fee;
padding: 20px;
margin: 60px 30px;
/*设置上下margin为60px*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
实际效果：div1和div2上下相距60px，而不是90px。
那float的坑是什么啦？
那就是float会取消相邻元素margin的自动合并！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
div {
width: 60px;
height: 60px;
background-color: #fdd;
border: 10px solid #fee;
padding: 20px;
margin: 30px;
float: left;
/*设置左浮动*/
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
效果如下：两个div左右相距60px，而不是30px了！
相邻元素margin的自动合并与float的坑的更多相关文章
- 关于margin外边距合并的问题
一 .兄弟元素margin外边距合并演示 当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...
- 相邻元素之间的margin合并问题
任何元素都可以设置border 设置宽高可能无效 行内元素设置padding,margin上下是无效的,左右是有效的 外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距 ...
- 日常踩坑 — 相邻元素之间的margin合并问题。
踩坑:使用v-for渲染的组件,当然图中的id已经换成class,还是没有解决这个问题,于是各种查找资料,我就不信简单的CSS问题这么难解决! v-for渲染组件级传值: <div class= ...
- 为什么margin-top不是作用于父元素【margin外边距合并问题】
coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...
- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
这是寒冬大神提出的一个题目,刚开始看到这题的时候完全不知道从什么地方回答起好,题目内容比较广泛,找不到针对点.后来我觉得这个题目应该能拆成几个点来回答:1.'display'.'position' 和 ...
- margin外边距合并问题以及解决方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 盒子模型、网页自动居中、float浮动与清除、横向两列布局
1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...
- 转载：margin外边距合并问题以及解决方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素
<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...
随机推荐
- windows下flume 采集如何支持TAILDIR和tail
一.问题:Windows 下 flume采集配置TAILDIR的时候,会报如下错误: agent.sources.seqGenSrc.type = TAILDIR agent.sources.seqG ...
- Navicat12.1系列安装，破解以及破解navicat报错的解决方案
由于上课的需要,我们必须自己下载并安装 Navicat Premium 12,虽然安装过程很简单,但是安装后的navicat只能试用,并没有永久激活,然而我还想永久使用,所以就各种百度,因为不断地遇到 ...
- Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
今天上传图片遇到这个报错 百度了下,网上说是input标签type=file所以导致的问题,可是我的type=hidden 解决办法: 把上面的代码改成如下问题就解决了
- [hdu4513]常规dp
题意:给一个长度为m的序列,从里面选出一些数,相对位置不发生变化,并满足a[i]=a[n-i],a[1]<a[2]<...<a[(n+1)/2],n是数的个数,求最大的n 思路:dp ...
- [hdu5203]计数水题
思路:把一个木棍分成3段,使之能够构成三角形的方案总数可以这样计算,枚举一条边,然后可以推公式算出当前方案数.对于已知一条边的情况,也用公式推出.用max和min并维护下,以减少情况数目. #prag ...
- Elasticsearch系列---几个高级功能
概要 本篇主要介绍一下搜索模板.映射模板.高亮搜索和地理位置的简单玩法. 标准搜索模板 搜索模板search tempalte高级功能之一,可以将我们的一些搜索进行模板化,使用现有模板时传入指定的参数 ...
- 我的linux学习日记day8
链接文件 linux中链接有两种,一种是硬链接,一种是软链接 一.硬链接 硬链接是指通过索引节点来进行链接创建硬链接的方法如下:ln 源文件 硬链接文件具有相同inode号的多个文件互为硬链接文件删除 ...
- ASP.NET Core依赖注入(DI)
ASP.NET Core允许我们指定注册服务的生存期.服务实例将根据指定的生存时间自动处理.因此,我们无需担心清理此依赖关系,他将由ASP.NET Core框架处理.有如下三种类型的生命周期. 关于依 ...
- spark aggregate函数
aggregate函数将每个分区里面的元素进行聚合,然后用combine函数将每个分区的结果和初始值(zeroValue)进行combine操作.这个函数最终返回的类型不需要和RDD中元素类型一致. ...
- 【雕爷学编程】零基础Python（01）---“投机取巧”的三条途径
从3月13日报名尝试上网课学习(4天课8.9元),开始接触Python(中文发音“派森”),到今天有一星期了.这两天广泛搜索了一下相关的学习途径,本着“投机取巧”的出发点,居然小有心得,这里一并分享出 ...