Question

我有一个看起来像这样的div：

<div style="width: 400px; height: 50px; text-align: right; padding-right: 50px">This is a test</div>

我需要文本在右边有一些空格，所以我添加了padding-right: 50px。然后我注意到填充，但现在div是450px而不是原来的400px。

如何在不改变div宽度的情况下添加50px的填充？

它需要在大多数主流浏览器中运行。我已经看过几个例子，但它们似乎没有用。

感谢。

Answer 1

内联样式，根据要求：

＆＃13;

<div style="box-sizing: border-box; width: 400px; height: 50px; text-align: right; padding-right: 50px; background: green">This is a test</div>

＆＃13;

对于其他地方的CSS：

*, :before, :after {
    box-sizing: border-box;
}