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 ...
随机推荐
- 《.NET 5.0 背锅案》第6集-案发现场回顾：故障情况下 Kubernetes 的部署表现
第1集:验证 .NET 5.0 正式版 docker 镜像问题 第2集:码中的小窟窿,背后的大坑,发现重要嫌犯 EnyimMemcachedCore 第3集-剧情反转:EnyimMemcachedCo ...
- Markdown 常用语言关键字
Markdown 语法高亮支持的语言还是比较多的,记下来备用. 语言名 关键字 Bash bash CoffeeScript coffeescript C++ cpp C# cs CSS css Di ...
- 入坑 docsify，一款神奇的文档生成利器！
layout: postcategory: javatitle: 入坑 docsify,一款神奇的文档生成利器!tagline: by 沉默王二tags: - java Guide 哥是我认识的一个非 ...
- Maximum execution time of 30 seconds exceeded in
在执行一次php脚本的时候,遇到了这样的报错,经过c Maximum execution time of 30 seconds exceeded in 翻译过来就是:执行时间超过了30秒最长执行时间: ...
- Springboot使用EasyExcel(仅限自己收藏)
pom文件依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel< ...
- Vegas实战——如何导入导出视频
Vegas作为一款专业的视频非编软件,在国内受到了很多用户的喜爱.小编认为,对于很多用户来说,他们选择sony vegas的一个原因是vegas在不论是从产品性能,还是使用效果上,都很容易被用户接受. ...
- ABBYY FineReader 15如何比较文档？
ABBYY FineReader 15 OCR文字识别软件能帮助用户快速地对比两个文档间的差异,适合用于审阅.修改文档,发现新旧版本差异,预防输出错误版本等情况.此功能既能用于对比同一格式文档的不同版 ...
- css3系列之详解border-image
border-image border-image呢,是给 边框加上背景图片的.没错,就是平常那一小小条的边框,也能加图片. 参数: border-image-source border-image ...
- JUC并发工具包之CyclicBarrier
1.简介 CyclicBarrier是一个同步器,允许多个线程等待彼此直到达一个执行点(barrier). CyclicBarrier都是在多个线程必须等到彼此都到达同一个执行点后才执行一段逻辑时才被 ...
- vue集成高德地图
vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...