相邻元素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 ...
随机推荐
- 迁移WPF项目到.NET CORE
综述 .NET CORE 3.0开始,桌面端支持WPF了.很多.NET FRAMEWORK的项目已经跑了一阵子了,不是很有必要支持.NET CORE,不过最近用一个程序,为了贯彻一些C# 8的特性,需 ...
- django 整理数据库文档时，从mysql导出的表中没有注释的解决方案
公司要将Django项目重构成Java项目,也就有了整理数据库文档的经历....... 由于django从model迁移时没有将注释(也就是模型类中的verbose_name)写进mysql的表中,导 ...
- zigbee通用IO口小作业
独立新建工程并编写.编译代码,实现按键控制流水灯运行,完成以下任务要求: [1]程序开始运行时,D4.D3.D6.D5灯全亮一会,然后全灭一会,开始进入流水灯. [2]流水灯的运行过程为:D4灯亮,其 ...
- JS的数据类型判断函数、数组对象结构处理、日期转换函数，浏览器类型判断函数合集
工具地址:https://github.com/BothEyes1993/bes-jstools bes-jstools 100多个基础常用JS函数和各种数据转换处理集合大全,此工具包是在 outil ...
- 单线程和多线程执行对比—Python多线程编程
单线程和多线程执行对比 本章使用递归求斐波那契.阶乘与累加函数的执行来对比单线程与多线程: 斐波那契.阶乘与累加(mtfacfib.py): import threading from time ...
- Android 组件间通信--事件驱动
在android中,组件间通信常用的方式: 1.使用广播机制:在主页面中监听特定的广播事件,进行业务逻辑的操作,其他页面只需要根据需求发送广播即可 例如:常用app结构中,左边通常为菜单栏,点击菜单栏 ...
- java ->动态页面技术（JSP）
动态页面技术(JSP/EL/JSTL) JSP技术 jsp脚本和注释 jsp脚本: 1)<%java代码%> ----- 内部的java代码翻译到service方法的内部 2)<%= ...
- webpack指南（四）shimming
shimming 将一个新的 API 引入到一个旧的环境中,而且仅靠旧的环境中已有的手段实现. ProvidePlugin 我们在程序中暴露一个变量,通知webpack某个库被使用,webpack将在 ...
- mysql小白系列_07 锁与事务
1.MySQL参数autocommit生产环境设1还是0?为什么? 2.MySQL参数tx_isolation生产环境上大多数是设什么值,为什么? 3.与MySQL锁相关的有哪些因素? 1.MySQL ...
- Webconfig配置刷新时间,前台页面调用这个时间
<configuration> <appSettings> <add key="webpages:Version" value="2.0.0 ...