使用CSS将我的文本轻推10px

Question

我有一个宽度为235像素，高度为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只会缩进第一行。