正确的文本填充

Question

我尝试使用填充：10px到this example但它使div向左移动。您可能会想到任何解决方案吗？

Answer 1

这是因为宽度不包括元素上可能包含的任何填充或边距。您需要从总宽度尺寸中减去40px以保持相同的尺寸。

试试这个：

.promo {
    color:#5f5f5f;
    width:240px;
    height:74px;
    background:url('http://i27.lulzimg.com/e1de57065d.png') no-repeat;
    float:right;
    display:block;
    margin-top:20px;
    padding: 20px;
}

http://jsfiddle.net/animuson/NncNE/3/

修改：如果您愿意，可以使用padding: 15px 20px，我认为它看起来更好，并且更好地居中。