相邻元素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 ...
随机推荐
- 线段树的区间合并 B - LCIS
B - LCIS HDU - 3308 这个是一个很简单很明显的线段树的区间合并,不过区间合并的题目都还是有点难写,建议存个板子. #include <cstdio> #include & ...
- 近期总结的一些Java基础
1.面向过程:当需要实现一个功能的时候,每一个过程中的详细步骤和细节都要亲力亲为. 2.面向对象:当需要实现一个功能的时候,不关心详细的步骤细节,而是找人帮我做事. 3.类和对象的关系: a-类是 ...
- STM32 CubeIDE无法进行调试的问题
解决了由于一个很容易忽视的细节最终导致系统配置存在错误造成STM32 CubeIDE无法进行调试的问题: 文章目录 来龙去脉 解决方案 反思 来龙去脉 在享受CubeIDE快速和便捷的服务之后,生成了 ...
- [c++ IO加速]快速输入输出
自己封装的FastIO类,效率虽有所损失,不过实用性提高很多. 测试,写10000000个整数(86M): printf 2.7s cout 27s FastIO 1s 测试,读10000000个整数 ...
- gather函数
gather(input, dim, index):根据 index,在 dim 维度上选取数据,输出的 size 与 index 一致 # input (Tensor) – 源张量 # ...
- layui常见弹窗使用方法
1:confim类型使用方法 layui.use('layer', function(){ layer.confirm('是否立即上传卷宗信息?', { btn: ['是','否'], t ...
- MySQL++：liunx 安装 MySQL
第一步: 1):下载mysql安装包:这里选择下载版本 5.6.33,通用版,linux下64位 http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql- ...
- Sentinel源码解析二（Slot总览）
写在前面 本文继续来分析Sentinel的源码,上篇文章对Sentinel的调用过程做了深入分析,主要涉及到了两个概念:插槽链和Node节点.那么接下来我们就根据插槽链的调用关系来依次分析每个插槽(s ...
- sound of the genuine
“There is something in every one of you that waits and listens for the sound of the genuine in yours ...
- node的http模块
node中的几个常用核心模块的api返回的都是eventEmitter的实例,也就是说都继承了on和emit方法,用以监听事件并触发回调来处理事件. http模块处理网络请求通常是创建一个server ...