相邻元素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 ...
随机推荐
- 揭露.net培训结构软谋收钱踢学员的套路
本人以下文章全部真实,希望管理员能通过,给更多的.net学者一个警示,避免更多的.neter掉入泥坑. 本人小码农一枚,主要做.net方向,苦于进步无门,各种资料收集渠道受限,最后狠心花一个月工资报名 ...
- IDEA 2020.1 安装教程
目录 IDEA 2020.1 安装教程 准备工作 破解教程 IDEA 2020.1 安装教程 IDEA 2020.1 安装教程 Win 10 版 64位操作系统 准备工作 IDEA旗舰版下载地址 je ...
- 面向开发者的Docker实践
show me the code and talk to me,做的出来更要说的明白 本文源码,请点击learnSpringboot 我是布尔bl,你的支持是我分享的动力! 一. 引入 有开发经验的都 ...
- Python Serial 串口基本操作（收发数据）
1.需要模块以及测试工具 模块名:pyserial 使用命令下载:python -m pip install pyserial 串口调试工具:sscom5.13.1.exe 2.导入模块 import ...
- CF-163A Substring and Subsequence 字符串DP
Substring and Subsequence 题意 给出两个字符串s,t,求出有多少对s的子串和t的子序列相等. 思路 类似于最长公共子序列的dp数组. dp[i][j]表示s中以i为结尾的子串 ...
- [zoj3596]DP(BFS)
题意:求n的最小倍数,满足性质P:十进制的每一位上的数有m种(0<m<=10). 思路:直接枚举n的最小倍数,然后检测是否满足性质P,n一大很容易超时,并且无法判断无解的情况.巧妙的做法是 ...
- java套打
1:套打可能是以后软件开发可能会涉及到的功能,主要麻烦地方就是需要精确定位,光是打印发票还好,要是打印那种协议类型的特别麻烦,不仅长而且需要的数据多 ,定位麻烦. 2:而且大多数情况是需要去除页眉页脚 ...
- Android平台使用termux，随时随地写代码
生活如此无聊,写点代码打发时间. 趁着假期,我的vivo手机和华为平板(均为4G+64G配置)用的也比较少.于是,思考着如何将这2个设备用来写latex.python.用kingroot却取不了两设备 ...
- Unity2.5D Sprite层级显示遮挡问题处理
代码源自游戏<A Place for the Unwilling> 开发<A Place for the Unwilling>游戏第一部要解决的问题就是让精灵可以围绕其它精灵前 ...
- 02.drf不使用serializers返回数据
drf 可以使用不经过model和serialzier的数据返回,也可以配置权限 class DashboardStatusViewset(viewsets.ViewSet): "" ...