Question

一个简单的css问题，帮帮忙

<div style="width:640px; height:50px;margin-left:30px; background-color:#F2F2F2; border:solid 1px #DEDEDE">
<span style="paddingleft:20px;color:#36648B">ABCD</span>
</div>这里面的ABCD是紧挨着div的上边缘的，我要他距离上边缘有15px的距离，在span里用margin—top：10px或padding-10px都不起作用，是什么原因？

Answer 1

首先指出一个错误：<span style="paddingleft:20px;color:#36648B">ABCD</span>，应该是<span style="padding-left:20px;color:#36648B">ABCD</span>

如果你想他距离上边缘有15px的距离，应该这样写
<div style="width:640px; height:35px;margin-left:30px; background-color:#F2F2F2; border:solid 1px #DEDEDE; padding-top:15px;">
<span style="padding-left:20px;color:#36648B;">ABCD</span>
</div>

要注意的是在div的style里面写padding-top:15px;然后把height:50px改为height:35px

我觉得你想要的效果是垂直居中，所以另外给多一个给你：
<div style="width:640px; height:50px;margin-left:30px; background-color:#F2F2F2; border:solid 1px #DEDEDE; line-height:50px;">
<span style="padding-left:20px;color:#36648B;">ABCD</span>
</div>

Answer 2

span里面再加上display:block; 就行了, 原因就是因为span是内嵌元素, 只有块级的元素才有padding属性. display:block 就是让该元素变成块级的.

Answer 3

<span style="paddingleft:20px;color:#36648B">ABCD</span>
这里的代码有误，不是吗？
<span style=" padding-left:20px;color:#36648B">ABCD</span>