我正在创建一个网站与DIVs。除了创建DIV之外,一切都正常工作。我像这样创建它们(示例):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

当我添加padding-left属性时,DIV的宽度改变为220px,我希望它保持在200px。

让我们说我创建了另一个DIV命名为anotherdiv完全相同的newdiv,并把它放在newdiv,但newdiv没有填充和anotherdiv有填充-左:20px。我得到同样的东西,newdiv的宽度将是220px。

我该如何解决这个问题?


当前回答

试试这个

box-sizing: border-box;

其他回答

只需要改变你的div宽度为160px 如果你有一个20px的填充,它会给你的div增加40px的额外宽度,所以你需要从宽度中减去40px,以保持你的div看起来正常,而不是因为额外的宽度而扭曲,你的文本都是乱七八糟的。

只需添加box-sizing: border-box;

当我添加padding-left属性时, DIV的宽度变为220px

是的,这完全符合标准。本来就是这样的。

假设我创建了另一个DIV Anotherdiv和newdiv完全一样, 把它放到newdiv里面,但是是newdiv 没有填充和另一个div有吗 padding-left: 20 px。结果是一样的 Thing, newdiv的宽度为220px;

不,newdiv将保持200px宽。

试试这个

box-sizing: border-box;

这将在所有情况下工作,这额外的填充包括在预定义的宽度

box-sizing: border-box;