CSS - 填充影响 DIV 上的背景图像

Question

我有一个像这样的 div:

<div id="mybox">Hello World</div>

这个的 CSS 是:

#mybox {
    position:absolute;
    left:30px;
    top:147px;
    width:556px;
    height:31px;
    font-family : Verdana, Helvetica, sans-serif;
    font-size : 24px;
    color: white;
        background-image:url('images/image2.jpg');
    background-repeat:no;
    text-align:left;
    vertical-align:middle;
        text-shadow: 0px 0px 10px #000;
}

就像我说的，这个 div 里面有一个文本。在这个例子中:“ Hello World ”。

但我认为文本太靠近左边框，我想在 div 中添加一点填充。所以我添加了这个

padding-left:5px;

问题在于这样做时，div 的图像会向右移动并覆盖右侧的另一个 div。

如何将文本向右移动 5 个像素并保持 div 的图像固定？

谢谢。

Answer 1

你必须使用text-indent

来自 http://reference.sitepoint.com/css/text-indent

margins and padding affect the whole block, text-indent only applies to the first rendered line of text in the element.

你的 css text-indent

#mybox {
    position:absolute;
    left:30px;
    top:147px;
    width:556px;
    height:31px;
    font-family : Verdana, Helvetica, sans-serif;
    font-size : 24px;
    color: white;
        background-image:url('images/image2.jpg');
    background-repeat:no;
    text-align:left;
    vertical-align:middle;
        text-shadow: 0px 0px 10px #000;
    text-indent:100px;
}

检查这个working Demo

重要说明:

来自 http://css-plus.com/2010/09/best-of-css-plus/

If you have a set width of 200px and then add a 20px left padding, the total element size would be 220px. It’s possible to solve this problem by changing the width to 180px, but I find this very annoying as the width has to be changed every time the padding is changed. Text-indent solves this absolutely wonderfully.