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:margin重叠-父子关系

css中父div里面有一个子div,给子div添加margin-top: 20px,发现了一个问题!! 给子div添加margin-top: 20px,发现父子DIV都一起相对BODY下移了20PX...
  • huoshendawo_mo
  • huoshendawo_mo
  • 2015年11月05日 20:59
  • 2825

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

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

css中margin标记可以带一个、二个、三个、四个参数,各有不同的含义

在css中使用margin可以将margin-top,margin-right,margin-bottom,margin-left,缩写为一个标记,顺序为上右下左(顺时针)。带不同的参数具有不同的含义...
  • yywan1314520
  • yywan1314520
  • 2015年09月15日 09:55
  • 1325

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

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

关于css的margin塌陷现象

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

CSS-深入理解之margin

在一次面试过程中,面试官问到margin的塌陷的问题,以及margin负值的问题。当时有点蒙,对这块知识点的理解一点都不深入。为了补充这方面的知识,特意去查了一下相关的资料,发现张鑫旭大神在慕课网上有...
  • zhq2005095
  • zhq2005095
  • 2017年03月19日 22:20
  • 369

css关于margin在不同浏览器下的兼容

在学校中学的是Html,并没有学习Html5,工作后遇到这个问题。 发现只要把H4的标头改成H5的标头就能解决兼容性了(谷歌和火狐,没有去测试Ie的兼容性) 只要把改成就可以了。...
  • fjh1370505782
  • fjh1370505782
  • 2017年02月05日 11:27
  • 454

CSS 外边距(margin)重叠及防止方法

两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒...
  • qq_24235325
  • qq_24235325
  • 2016年03月01日 16:43
  • 3744

当margin用百分号(%)时,数值是以谁为基准?

今天做了一个demo,自己用原生的js写了一个轮播图,那么问题来了,当你用百分号表示margin-left的时候,他取得百分号的数值是以谁做为基准而取得值呢?子元素和父元素的width都是百分号表示,...
  • wxl1555
  • wxl1555
  • 2016年10月01日 01:05
  • 865

CSS中的margin:auto失效原因

1.要给居中的元素一个宽度,否者无效。 2.该元素一定不能浮动,否者无效。 3 在HTML中使用标签,需考虑好整体构架,否者全部元素都会居中的。 4.display:table-cell ...
  • zym_zb
  • zym_zb
  • 2017年02月18日 19:21
  • 632
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS margin研究
举报原因:
原因补充:

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