相邻元素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 ...
随机推荐
- Xenia and Colorful Gems(二分--思维)
给定三个数组a,b,c. 要求从每个数字取一个数,使得两两之差和最小. 求出这个数. \(我又懵逼了.我是会O(n^3)的暴力啊,怎么办.\) \(\color{Red}{从结果看,选出来的三个数必定 ...
- 2020牛客寒假算法基础集训营2 J题可以回顾回顾
2020牛客寒假算法基础集训营2 A.做游戏 这是个签到题. #include <cstdio> #include <cstdlib> #include <cstring ...
- Coursera课程笔记----Write Professional Emails in English----Week 1
Get to Know Basic Email Writing Structures(Week 1) Introduction to Course Email and Editing Basics S ...
- 浅析Spring中bean的作用域
一.前言 刚刚花了点时间,阅读了一下Spring官方文档中,关于bean的作用域这一块的内容.Spring-4.3.21官方文档中,共介绍了七种bean作用域,这篇博客就来简单介绍一下这七种作用域 ...
- 出现Please make sure you have the correct access rights and the repository exists.问题解决
问题: 有一段时间没有用码云了,当输入 git push -u origin master命令出现Please make sure you have the correct access rights ...
- [hdu1533]二分图最大权匹配 || 最小费用最大流
题意:给一个n*m的地图,'m'表示人,'H'表示房子,求所有人都回到房子所走的距离之和的最小值(距离为曼哈顿距离). 思路:比较明显的二分图最大权匹配模型,将每个人向房子连一条边,边权为曼哈顿距离的 ...
- 如何使用 frp 实现内网穿透
这有一个专注Gopher技术成长的开源项目「go home」 背景 作为一名程序员,家里多多少少会有一些落了灰的电脑,如果把闲置的电脑变成服务器,不仅有良好的配置,还能用来做各种测试,那就再好不过了. ...
- jstree 反选，测试400条数据左右有点卡
$("#reversecheckallmachines").on("change", function () { var checkedNodes = []; ...
- TP5 order排序
order方法属于模型的连贯操作方法之一,用于对操作的结果排序. ->order('sort desc,id desc') 用法如下: Db::table('think_user')->w ...
- 201843 2019-2020-2 《Python程序设计》实验二报告
201843 2019-2020-2 <Python程序设计>实验二报告 课程:<Python程序设计> 班级: 1843 姓名: 李新锐 学号:20184302 实验教师:王 ...