margin塌陷及处理

原创 2016年08月28日 16:33:14

什么是margin塌陷,margin塌陷是指在使用margin布局时,特定情况下导致margin高度与代码中设计的高度不同。

1.

.outside
{
	width: 100px;
	height: 100px;
	background: red;
}
.inside
{
	width: 50px;
	height: 50px;
	background: green;
	margin-top: 50px;
}
<div class="outside">
	<div class="inside"></div>
</div>
期望效果


实际效果

解决办法是在父元素设置overflow:hidde属性。

.outside
{
	width: 100px;
	height: 100px;
	background: red;
	overflow: hidden;
}
在IE6/7下配合使用zoom1解决

2.


.top
{
	height: 50px;
	background: red;
	margin-bottom: 50px;
}
.bottom
{
	height: 50px;
	background: green;
	margin-top: 50px;
}
<div class="top"></div>
<div class="bottom"></div>
这种情况是浏览器不希望编程人员使用上下重复的margin布局

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

margin塌陷问题与合并问题

margin塌陷问题与合并问题margin塌陷问题和合并问题都只对垂直方向有效 margin塌陷问题这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时,外层盒模型的margin-to...

由父子元素margin说开——外边距塌陷(margin-collapse)

布局时往往要遇到div嵌套显示效果,如下: 假设蓝色的为div1,黄色的为div2,为了实现上图所示布局,我的想法是为div1设置margin:0px auto; div2位置 marg...

解决margin-top塌陷的6种方法

demo:一个父盒子嵌套一个子盒子,子盒子margin-top带来的塌陷问题。      6种方法:   1.给父盒子添加border     2.给父盒子添加padding-top     ...

CSS 元素垂直居中的 6种方法

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...

元素脱离普通文档流后特点及问题总结

在使用float,position:absolute | fixed属性之后元素会脱离普通文档流,与inline-block和position:relative不同,后两者还在普通文档流中。 对于行...

NO.55 双机定量备份某共享文件夹(例:可用于备份VSS Database)

使用Windows的定时计划任务按一定周期执行此批处理即可@REM ######################################################### @REM N...

line-height与vertical-align使用时发现的问题

垂直居中是网页布局中经常要用的技巧,尤其是会涉及到line-height属性和veitical-align属性。我在使用的过程中发现了这样一个问题。 .a{width: 400px;height:...

由父子元素margin说开——外边距塌陷(margin-collapse)

布局时往往要遇到div嵌套显示效果,如下: 假设蓝色的为div1,黄色的为div2,为了实现上图所示布局,我的想法是为demo1设置margin:0px auto; demo2位置margin...

关于css的margin塌陷现象

由于偶然翻到了以前的笔记,记载的正好是css的margin塌陷现象。于是有了写在知乎上与大家分享讨论的想法。 在标准文档流中,竖直方向(记住是竖直方向,左右方向的不会出现塌陷现象)的margin会出...

问题与对策:CSS的margin塌陷(collapse)

CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。w3school也规定:当两个垂直外边距相遇时,它们将形成一个外边距。合并...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)