CSS margin研究

原创 2013年05月06日 12:16:40


只有垂直方向才会出现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 padding和margin区别

  • 2013年12月08日 00:21
  • 3KB
  • 下载

css中margin的缩写

  • 2015年11月09日 11:39
  • 15KB
  • 下载

CSS中 Padding和Margin两个属性的详细介绍和举例说明

本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键. 注: 为...

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

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

从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)

结论请看最后的图片 关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的...

两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

代码: 效果图: 路人甲:OK?等高了?? 路人丙:不是吧? 路人乙:你这是在逗我? xiaomogg: 效果有点惨,不过这的确是已经做了登高处理的 为什么“登高”,看起来却不等高 请留意代...

CSS深入之其实你可能根本不认识margin和padding(一)

1.我们来解析官方的margin是怎么个说法margin属性可以为给定元素设置所有四个(上下左右)方向的外边距属性。四个外边距属性设置分别是: margin-top, margin-right, ma...

web前端-CSS Margin(外边距)-013

CSS Margin(外边距)属性定义元素周围的空间。Marginmargin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边距...

CSS padding margin border属性和布局

CSS padding margin border属性和布局

Web前端--CSS中margin和padding的区别

padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距.padding和margin常用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS margin研究
举报原因:
原因补充:

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