相邻元素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 ...
随机推荐
- 入职半年多，Guide哥总结了这些帮助你领先90%程序员的好习惯！
大家好,我是 Guide 哥,这篇文章还是不分享技术文章了,我想简单聊聊一些程序员的好习惯. 其实自己写这篇文章还是很忐忑的,毕竟自己算不上一个优秀的程序员,但也不是那么差.大学学习编程 4 年,工作 ...
- JavaScript 循环判断练习题
JavaScript 循环判断练习题 小明有一组水果("苹果","梨子","香蕉","葡萄","西瓜" ...
- SpringBoot：整合Druid、MyBatis
目录 简介 JDBC 导入依赖 连接数据库 CRUD操作 自定义数据源 DruidDataSource Druid 简介 配置数据源 配置 Druid 数据源监控 配置 Druid web 监控 fi ...
- 附018.K3S-ETCD高可用部署
一 K3S概述 1.1 K3S介绍 K3S是一个轻量级Kubernetes发行版.易于安装,内存消耗低,所有二进制文件不到40mb. 适用于: 边缘计算-Edge 物联网-IoT CI ARM 1.2 ...
- 关于fromdata的上传文件问题
<div <label>上传pdf</label> <input id="fileId" type="file" accep ...
- etcd实现服务发现
前言 etcd环境安装与使用文章中介绍了etcd的安装及v3 API使用,本篇将介绍如何使用etcd实现服务发现功能. 服务发现介绍 服务发现要解决的也是分布式系统中最常见的问题之一,即在同一个分布式 ...
- 这或许是最详细的JUC多线程并发总结
多线程进阶---JUC并发编程 完整代码传送门,见文章末尾 1.Lock锁(重点) 传统 Synchronizd package com.godfrey.demo01; /** * descripti ...
- git:error: Your local changes to the following files would be overwritten by merge:
最近用git在服务器.github.本地更新代码的时候,因为频繁修改偶尔出现这个错误 覆盖本地的代码: git stash git pull git stash pop 保留对服务器上的修改: git ...
- PAT-1132 Cut Integer （整数分割）
Cutting an integer means to cut a K digits long integer Z into two integers of (K/2) digits long int ...
- PAT-1060 Are They Equal （科学计数法）
1060. Are They Equal If a machine can save only 3 significant digits, the float numbers 12300 and 1 ...