使用CSS輕推我的文字10px

我有一個div寬度爲235px，高度爲30px，此刻我的文本位於div的左側。使用CSS輕推我的文字10px

我想將我的文本右移10px，以便它只是div的「牆」，但我似乎無法使用填充和邊距正確實現此目的。

這是到目前爲止我的代碼：

.menutop { 
    height:30px; 
    width:235px; 
    background-color:rgb(221,221,221); 
    color:#666; 
    line-height:30px; 
    font-weight:bold; 
    border-style: solid; 
    border-width:1px; 
    border-color:#999; 
}

當過我添加padding/padding:left或margin/margin:left似乎移動的div以及內部的文本。

什麼是最簡單的方法來實現我所追求的？

例如：Fiddle。

來源

2013-10-25 SaturnsEye

你可以像下面這樣使用'text-indent'：http://jsfiddle.net/sjvv7/1/ – SombreErmine

我無法重現你的問題：我添加了一個10px'padding-left'，它似乎工作正確：http://jsfiddle.net/sjvv7/3/ – Arkana

您需要使用：的

padding-left:10px;

代替padding:left

這會增加你的div由10px的寬度，所以你可能想通過10px的，以減少。一個box類型元素的渲染寬度等於它的寬度，左/右邊界和左/右填充的總和（左/右邊距也起作用）。

或者你可以使用：

text-indent:10px;

注意，如果文本跨越多行，text-indent只會縮進第一線。

來源

2013-10-25 10:02:47 tomsullivan1989

對不起，我的意思是'填充左'。但OMG我嘗試了這一點，它並沒有工作得更早！哈哈，血腥的CSS。無論如何謝謝@ tomsullivan1989 – SaturnsEye

好吧，答案很好，但只是一個說明，'文本縮進'是一個單一的，多個單詞好..但將是一個不錯的選擇，如果文本上升到2行 –

oooh沒有，實際上。它正在做它以前做的事情，它也爲div的寬度增加了10px – SaturnsEye

使用CSS輕推我的文字10px

回答

相關問題