css - 使用 CSS 将我的文本微调 10px

Question

我有一个 235 像素宽 x 30 像素高的 div，目前我的文本位于 div 内的左侧。

我想将我的文本向右微移 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 .

Answer 1

你需要使用:

padding-left:10px;

代替 padding:left

这会将 div 的宽度增加 10px，因此您可能希望将其减少 10px。盒型元素的渲染宽度等于其宽度、左/右边框和左/右填充(左/右边距也起作用)的总和。

或者你可以使用:

text-indent:10px;

请注意，如果文本超过一行，text-indent 只会缩进第一行。