CSS - 填充影響的背景圖像上DIV

我有這樣一個div：CSS - 填充影響的背景圖像上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的圖像是固定的？

謝謝。

來源

2014-01-06 SpaceDog

如果你打開了box-sizing：border-box，添加填充不會是個問題。 – kei

必須使用text-indent

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

邊距和填充影響整個塊，文本縮進只適用到第一在元素中呈現的文本行。

您與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

重要提示 CSS：

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

如果您有200px的設置寬度，然後添加20px左填充，則總元素大小將爲220px。可以通過將寬度更改爲180px來解決此問題，但我覺得這非常煩人，因爲每次填充更改時都必須更改寬度。文字縮進非常好地解決了這個問題。

來源

2014-01-06 19:41:03

完美！完美工作！謝謝！！！！！是否有任何等價物可以在所有方向創建縮進？ – SpaceDog

歡迎:) –

編輯：填充做工精細，你可以在這個小提琴結帳吧：http://jsfiddle.net/6HxJ4/
我只需添加一個邊框，顯示什麼是邊界線。
padding-left:50px;

來源

2014-01-06 19:39:35 Root125

不，邊緣移動整個div。保證金是分外的東西。 – SpaceDog

結帳jsfiddle鏈接 – Root125

可以使用

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

來源

2014-01-06 19:40:23

最簡單的解決辦法是換另一種元素的文字，並給出該元素的5個像素的左緣，像這樣：

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

CSS：

p { 
    margin-left:5px; 
}

在div上添加邊距本身不會在文本框內移動文本。

來源

2014-01-06 19:41:23 Dpeif

您應該添加位置到你的背景圖片：

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

來源

2014-01-06 19:41:38 Tomas

不幸的是，經過多次測試後，這個解決方案在div上引起其他問題...... – SpaceDog

延遲到了方響應...

這可以通過CSS background-origin加以解決。

如W3Schools的注意...

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

填充盒 - 背景圖片從填充邊緣的左上角開始。
邊框 - 背景圖像從邊框的左上角開始。
內容框 - 背景圖像從內容的左上角開始。

在此示例...

-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個像素，與圖像放置20個像素從div的頂部，和文本起始距離頂部40像素。

來源

2015-11-18 22:24:47

CSS - 填充影響的背景圖像上DIV

回答

相關問題