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     ...

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

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

HTML:margin塌陷现象的解决

设置子元素的margin,父元素也具有与子元素相同的margin值,称之为塌陷现象。...
  • mumu42
  • mumu42
  • 2017年07月29日 13:29
  • 162

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

CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。w3school也规定:当两个垂直外边距相遇时,它们将形成一个外边距。合并...

CSS中的margin塌陷(collapse)

对于css中的margin塌陷问题,先看下面代码: 1.并排元素之间的margin问题: html代码: Span2 css代码: *{ margin:0px; padding:0px; ...
  • jian_xi
  • jian_xi
  • 2016年12月07日 12:43
  • 261

margin塌陷(collapse)。水平方向会塌陷么?水平边距永远不会重合。

1.当两个对象为上下关系时,而且都具备margin属性时,上面的margin-bottom与下面的margin-top会发生塌陷 当margin-bottom和margin都为正数时,结果为两者之间的...

IE6下margin双倍边距Bug的处理办法

改了一天,我才发现了问题,除了IE6双倍边距之外,其他的浏览器都没有问题,为此改了无数次的代码。为了修复双倍边距bug,整理了一下的资料。 一、什么是双边距Bug? 先来看图: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:margin塌陷及处理
举报原因:
原因补充:

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