这css错哪了呀?求帮助

hphper 发布于 2014/07/20 18:00
阅读 278
收藏 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>跳转提示 </title>
<style>
*{padding:0;margin:0;}
body{
	background:black;
}
body #tip{
	width:200px;
	height:200px;
	background:gray;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	color:white;
	font-weight:bolder;
	border-radius:0px;
}
#tip .con{
	height:40px;
	width:100px;
	margin-top: 20px;
	background:red;
}
a{
	text-decoration:none;
}
</style>
</head>
<body>
<div id='tip'>
<div class='con'>123</div>
<div class='tiao'>456</div>
</div>

</body>
</html>

我只想让con距他的父元素 向下20px,为啥现在是tip相对body向下20px呢?

我tip明确margin-top:0  为啥没用

加载中
0
escapenull
escapenull

垂直方向上,两个相互接触的margin会发生重叠(collapse)现象。因为这里的父元素tip和子元素con在垂直方向上都有margin(margin-top),且两个元素之间没有其它东西(border或者其他东西)来阻挡两者的margin的接触,所以两个元素的margin会相互接触,会发生所谓的collapse现象,collapse后的margin变为两者较大的那个(此为较大的con元素的20px)。亦即tip的margin-top因为collapse现象变为20px;con的margin-top继续保持20px(不过此时是相对body而言的20px)。你做做试验就理解了。

可以参见下面两篇文章:

http://www.hicss.net/do-not-tell-me-you-understand-margin/

http://www.hicss.net/use-margin-or-padding/

应该会对你有点帮助。

疯狂的流浪
疯狂的流浪
原来是这样啊,学习了
hphper
hphper
嗯,谢谢啊,应该是这样的,我也试过,两个都设置的话,取大的
1
疯狂的流浪
疯狂的流浪

不知道为什么,我在tip里面加了一句border:red soild 1px;后就正常了,没太明白这其中的道理

疯狂的流浪
疯狂的流浪
回复 @hphper : 不是怎么找到的,慢慢调试呗,我比较喜欢用border这个属性来查看div的位置等情况,刚才你这里又定义了宽高,所以用border调试起来很爽,但是具体是什么原因这个我还真不清楚,求高手指点
hphper
hphper
谢谢啊,这个确实可以解决,你怎么找到的,我也不明白原理 之前写,还真没注意
0
石头和面包
石头和面包

用position:relative试一下

hphper
hphper
不好使
0
freedonn
freedonn
打开眼界啊!
返回顶部
顶部