margin外边距合并问题以及解决方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div{
/* overflow: hidden;*//*利用该属性或者通过给父级元素设置border可以避免出现父级元素的margin合并的情况，当没有设置这两个属性之一时，该div的margin-top值会取div1的margin-top和其自身margin-top的最大值*/
/* border:1px solid red;*/
margin:0 auto;
margin-top:10px;
width:300px;
background: #aaa; }
.div1{
width:200px;
height:200px;
background: red;
margin:20px 0px;
}
.div2{
width:200px;
background: green;
margin: 10px 0px;
height:200px;
}
</style>
</head>
<body>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
</div> </body>
</html>
一、在div里面有子元素div1时，div在没有设置overflow：hidden或者是border属性时，div的margin-top的值为div/div1中的margin-top的最大值。上面的结果如图：
注意：div1在div中的margin-top值为0px;
二、当父级div设置了上述属性中的一个时（如overflow：hidden），结果如下图所示：
div的margin-top值为其自身设置的值10px，同时div1的margin-top值也是正常的20px
三、当元素是兄弟元素时，在不设置float和position:absolute时margin-bottom和margin-top会自动的合并为两者中的最大值。如上面的div1和div2两者之间的margin距离为20px;当两者同时设置了float：Left时，两者之间的margin值是30px,如图所示：
设置float前： 设置float后
margin外边距合并问题以及解决方式的更多相关文章
- 转载：margin外边距合并问题以及解决方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于margin外边距合并的问题
一 .兄弟元素margin外边距合并演示 当两个垂直方向相邻的兄弟元素都为常规流块盒,他们之间垂直方向的外边距不是两者之和,而是取两者中的最大值.这种现象被称为相邻的兄弟元素垂直方向外边距合并. ...
- 为什么margin-top不是作用于父元素【margin外边距合并问题】
coding时发现margin-top居然没作用于本元素上,而是作用到了父元素上. 原来是margin外边距合并导致的.以下是网上搬运来的知识: margin外边距合并详解:外边距合并现象在网页布局中 ...
- margin 外边距合并问题
一.兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二.嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框 ...
- CSS Margin外边距合并
应该知道这点东西的!!! 可是偏偏记不住! 外边距合并会发生在以下两种情况下: 1 垂直出现的两个拥有外边距的块级元素. div1 { margin-bottom: 20px; } div2 { ma ...
- 关于collapsed margin（外边距合并）
这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...
- CSS 垂直外边距合并：规范、延伸、原理、解决办法
<CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- CSS min-height不能解决垂直外边距合并问题
垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-hei ...
随机推荐
- 使用Compute Shader加速Irradiance Environment Map的计算
Irradiance Environment Map基本原理 Irradiance Environment Map(也叫Irradiance Map或Diffuse Environment Map), ...
- Min Stack leetcode
Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...
- calling c++ from golang with swig--windows dll（一）
calling c++ from golang with swig--windows dll 之前项目组开发的项目核心代码全部使用C++语言,新项目可能会引入golang,花了一天多时间研究了wind ...
- SHA1l加密
public static string SHA1Encrypt(string sourceText) { SHA1 sha = new SHA1CryptoServiceProvider(); AS ...
- Windows Phone下页面跳转动画的实现
写在前面的一些废话: 前段时间一直忙于其他的事情,好长时间没有更新博客,很多东西虽然看过.学过,但是没有仔细去思考,去总结,长时间不用或者用的少难免会遗忘.最近由于家里以及感情方面的事,人也变得有点怨 ...
- cudaMemcpy与cudaMemcpyAsync的区别
转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5231857.html 简单可以理解为:cudaMemcpy是同步的,而cudaMemcpyAsync是异步的 ...
- Android开发遇到手机无法弹出Toast
今天遇到了一个很奇怪的问题,一个很简单的程序,就是点击按钮弹出一个Toast,但在手机上运行起来,却没有正常弹出Toast 第一反应就是看看是否调用了show方法,很显然,并不是这个低级问题,为了确定 ...
- 分享几个不错的Android开源音视频播放器
整理了一下Github上几个开源的音视频播放器项目,有兴趣的同学可以clone代码去研究学习. UniversalMusicPlayer https://github.com/googlesamp ...
- 前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- Best Time to Buy and Sell Stock系列
I题 Say you have an array for which the ith element is the price of a given stock on day i. If you we ...