UC知道〔html〕为什么这种情况span的margin-top会失灵？
来源：百度知道 编辑：UC知道 时间：2024/05/05 06:10:02
<style><!--
span{
margin-left:25px;
margin-top:200px;
}
div{
width:500px;
height:500px;
}
--></style>
</head>
<body>
<div>
<span><a href="#">3
41523</a></span>
<ul>
<li>dddddddd</li>
<li>ddddd</li>
<li>dddddd</li>
<li>ddddddd</li>
</ul>
</div>
</body>
</html>
span{
margin-left:25px;
margin-top:200px;
}
div{
width:500px;
height:500px;
}
--></style>
</head>
<body>
<div>
<span><a href="#">3
41523</a></span>
<ul>
<li>dddddddd</li>
<li>ddddd</li>
<li>dddddd</li>
<li>ddddddd</li>
</ul>
</div>
</body>
</html>
因为span默认是行属性，而div默认是块属性，把span强制设为块属性就可以了。
☞把这段
span{
margin-left:25px;
margin-top:200px;
}
改为
span{
margin-left:25px;
margin-top:200px;
display:block;
}
如果只是为了margin-top生效，设置span的 display为inline-block，这样该span还是内联元素，如果只设置block，则变成了块级元素，看实际应用场景把