陋室

就是陋室

CSS margin研究


只有垂直方向才会出现margin重合

body{
			background: #CCC;
		}
		div{			
			background-color: blue;	
		}
		p{
			margin: 20px;
			background: red;
			color: white;
		}

IE6和Chrome的表现效果是一样的。都是下面的样子。


为什么不是下面这样的效果呢?


当然在这之前,你要知道“sunorry”和“test”两个文本都有20px,但是上下边距是会重叠的。也就是他两之间的距离不会是40px,而是20px。就像最上面的代码中你在div中加入margin: 20px;效果也大体相同,只不过会在左右出现一个20px的margin而已,上下还是一样的。这里再说一点,在重叠的时候若一个是40px,一个是20px,最后会还是40px,这就是重叠。如果你还感兴趣,试着把其中一个改成负的,其实负margin也是很有意的,在这里负margin不是什么hack,他符合规范,当然ie6是支持的。

①给父元素添加float属性


但是你要知道,float后会脱离文档流,且float和position: absolute会隐式改变display,会将他变成inline-block;所以会出现上面的情况。

②给父元素和p元素都添加float(记得清除浮动)

但是这种解决方案不是很完美,只能解决向上的情况。

③给父元素添加padding或border

此方法是我认为最好的方法。

但是我觉得margin重叠也不是什么坏事,有时挺好的。


阅读更多
文章标签: CSS IE6 web
个人分类: HTML&CSS
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭