css - 使用 CSS 将我的文本微移 10 像素

Question

我有一个 235px 宽 x 30px 高的 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 以及里面的文本。

实现我所追求的最简单的方法是什么？

示例：小提琴。

Answer 1

你需要使用：

padding-left:10px;

代替padding:left

这将使您的宽度增加div10 像素，因此您可能希望将其减少 10 像素。box 类型元素的渲染宽度等于其宽度、左/右边框和左/右填充（左/右外边距也起作用）的总和。

或者您可以使用：

text-indent:10px;

请注意，如果文本跨越多行，text-indent则只会缩进第一行。