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里面有一个文本。在这个例子中：“你好世界”。

但我觉得文字太靠近左边框了，我想在div上加一点填充。所以我添加了这个

padding-left:5px;

问题在于，通过这样做，div的图像向右移动并覆盖右边的另一个div。

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

感谢。

Answer 1

您必须使用text-indent

FROM http://reference.sitepoint.com/css/text-indent

边距和填充影响整个块，文本缩进仅适用到元素中第一个渲染的文本行。

{c} 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/

如果您的设置宽度为200px，然后添加20px左边的填充，则总元素大小为220px。有可能解决这个问题通过将宽度更改为180px，但我发现这非常烦人每次更改填充时都必须更改宽度。文本缩进绝对精彩地解决了这个问题。

Answer 2

您应该在背景图片中添加位置：

background-image: url('images/image2.jpg');
background-position: left top;
background-repeat: no-repeat;

Answer 3

编辑：填充工作正常，您可以在这个小提琴中查看它：http://jsfiddle.net/6HxJ4/
我只是添加一个边框来显示边界线的内容 padding-left:50px;

Answer 4

你可以使用

padding-left:5px;
background-position: -5px 0px;

Answer 5

最简单的解决方案是将文本包装在另一个元素中，并为该元素赋予5个像素的左边距，如下所示：

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

CSS：

p {
     margin-left:5px;
}

在div上设置一个边距不会在框内移动文本。

Answer 6

迟到的回应......

这可以通过CSS background-origin解决。

正如w3schools所指出的那样......

background-origin: padding-box|border-box|content-box|initial|inherit;

padding-box - 背景图片从填充边缘的左上角开始。
border-box - 背景图片从左上角开始边界。
内容框 - 背景图片从内容的左上角开始。

在这个例子中......

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

padding-left: 20px;
padding-top: 40px;

background-origin: padding-box;
background-repeat: no-repeat;
background-position: 20px 10px;
background-size: 22px 22px;
background-image: url(../artwork/image.png);

...文本和图像以20像素左对齐，图像距离div顶部20像素，文本从顶部开始40像素。

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

6 个答案: