css外边距重叠及避免方法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div {
width: 200px;
height: 200px;
}
.div1 {
margin: 50px;
background: red;
}
.div2 {
margin: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="div1 div"></div>
<div class="div2 div"></div>
</body>
</html>
上述代码中，div1和div2都设置了外边距，但是这两个垂直方向的外边距却会发生重叠，实际边距为大的那个盒子的外边距
避免方法：
1.给下面的盒子设置flot:left
2.给下面的盒子设置position:absolute
3.两个盒子都同时设置margin-top/bottom
css外边距重叠及避免方法的更多相关文章
- CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
- CSS外边距margin上下元素重叠
CSS外边距margin上下元素重叠 转载:http://www.gaoyouyou.com/view/77.htm 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如 ...
- margin属性以及垂直外边距重叠问题
盒子的margin属性 盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...
- CSS外边距叠加问题
CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合.重叠结果计算规则:①.两个相邻的外边距都是正数时,折叠结果是它 ...
- __x__(22)0907第四天__ 垂直外边距重叠
外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...
- __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷
<div class="box1"> <tabl></table> <div class="box2">< ...
- CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...
- margin,CSS边距重叠
CSS外边距叠加就是margin-collapse,边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距,水平边 距永远不会重合. 重叠结果计算规则: 两个相邻的外边距都是正数时,折叠结果是它 ...
- Css 外边距折叠(collapsed margin ) 浅析
Css 外边距折叠(collapses margin ) a.先来看看w3c 文档对于外边距折叠的定义: In CSS, the adjoining margins of two or more bo ...
随机推荐
- vpp dpdk 安装使用笔记
编译安装: make install-dep make build 编译 vpp 查看 pci 网卡 id : lshw -class network -businfo DPDK hugepage ...
- SQL SERVER数据库使用过程中系统提示死锁处理办法
马上双节(国庆节.中秋节)了,这篇文章是双节前的最后一篇,祈祷过节期间,数据库稳定运行,服务器正常发挥.祝大家假期愉快!!!! 任何的数据库都会出现死锁的情况,特别是一些大型的复杂业务,数据库架构的设 ...
- HW弹药库之红队作战手册
红方人员实战手册 声明 Author : By klion Date : 2020.2.15 寄语 : 愿 2020 后面的每一天都能一切安好 分享初衷 一来, 旨在为 "攻击" ...
- 学习笔记:[算法分析]数据结构与算法Python版[基本的数据结构-上]
线性结构Linear Structure ❖线性结构是一种有序数据项的集合,其中 每个数据项都有唯一的前驱和后继 除了第一个没有前驱,最后一个没有后继 新的数据项加入到数据集中时,只会加入到原有 某个 ...
- 使用python统计《三国演义》小说里人物出现次数前十名，并实现可视化。
一.安装所需要的第三方库 jieba (jieba是优秀的中文分词第三分库) pyecharts (一个优秀的数据可视化库) <三国演义>.txt下载地址(提取码:kist ) 使用pyc ...
- 3种终极方法，彻底解决CDR不显示缩略图！
站长所在的印刷出版行业,一般都是使用版本较低的CDR软件,以便更好的兼容出版厂,不然新版本的文件发厂出片时却打不开,而转低版本的话又容易出错.从最开始的 CorelDRAW 9 到现在的 CORELD ...
- 这可能是项目中最实用的java8示例了，还不来看？
一.组成及特点 数据源.中间操作.终端操作 流只能使用一次 并行流 和 串行流 二.可以产生流的数据源 集合.文件 三.中间操作 字符串操作拼接joining(""),底层实现是 ...
- Python正则表达式大全
前言 正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"))操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成 ...
- Python生成随机测试数据
前言 安装 pip install Faker 使用 from faker import Faker fake = Faker() name = fake.name() address = fake. ...
- 2019年第十届蓝桥杯【C++省赛B组】D、E、G、H、I题解
这场有几道题目思路,在之前比赛中遇到过 D. 数的分解 #枚举 题意 将\(2019\)分解成\(3\)个各不相同的正整数之和,并且每个正整数都不包含数字\(2\)和\(4\),一共有多少种分解方法? ...