一个关于css样式float属性的问题
代码片段如下，为什么对pic加上了float:left属性后，pic的实际显示的上边距为pic的margin-top加上h1的margin-top，在显示中pic实际上边...
代码片段如下，为什么对pic加上了float:left属性后，pic的实际显示的上边距为pic的margin-top加上h1的margin-top，
在显示中pic实际上边距为30px，而h1的仍为20px，
而pic的margin-left属性为什么依然是100px，而不是h1的margin-left加上pic本身的margin-left
可能对问题的描述有些不清楚，请直接把html代码考到文件中用IE打开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
h1{
background-color:#B13526; /*设置标题背景色 */
margin-top:20px;
margin-left:150px;
}
.pic{
float:left;
margin-left:100px;
margin-top:10px;
}
-->
</style>
</head>
<body>
<div class="pic"><img src="5-1.jpg" border="0"></div>
<h1>测试文字</h1>
</body>
</html> 展开
在显示中pic实际上边距为30px，而h1的仍为20px，
而pic的margin-left属性为什么依然是100px，而不是h1的margin-left加上pic本身的margin-left
可能对问题的描述有些不清楚，请直接把html代码考到文件中用IE打开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
h1{
background-color:#B13526; /*设置标题背景色 */
margin-top:20px;
margin-left:150px;
}
.pic{
float:left;
margin-left:100px;
margin-top:10px;
}
-->
</style>
</head>
<body>
<div class="pic"><img src="5-1.jpg" border="0"></div>
<h1>测试文字</h1>
</body>
</html> 展开
4个回答
展开全部
这个跟float有关，你设置的是相对谁来marging-right那么展示的就是谁的位置，这中间你只给pic加了float，但是没有给h1加，也就是说h1的marging你给设置成了默认的，即相对于浏览器margin-top:20px;margin-left:150px;如果想要的结果是pic+h1相加就必须要给h1相应的float。否则就会乱套。因为h1的标准依照你的想想是跟随pic后面的，但它默认的是浏览器。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先两个框的边距 在没有float:left的状态下一般是比较大的那个（不过如果这样设定在不同的浏览器下会比较危险）
而有了呢就是相加的
而pic的30px高并不是因为与h1的叠加，是与body叠加了，你可以设定<body style="margin:0; padding:0;">来看看
而有了呢就是相加的
而pic的30px高并不是因为与h1的叠加，是与body叠加了，你可以设定<body style="margin:0; padding:0;">来看看
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上的不大正确，你这个是由于元素毗邻导致的边距折叠问题，可以看看css2.1标准
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我显示的很正常呀，这里的margin-top:是相对于h1的高度，那就看你要多少了，这还跟你图片大小有关。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
