我正在创建一个网站与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;

其他回答

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

box-sizing: border-box;

在newdiv中添加一个div,宽度:auto, margin-left: 20px

从newdiv中删除填充。

W3 Box模型页面有很好的信息。

试试这个

box-sizing: border-box;

添加属性:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

注意:这在ie8以下版本中不起作用。

如果你想在不改变div大小的情况下缩进div内的文本,使用CSS text-indent代替padding-left。

宣传画{ indent: 1 em; } .border { 边框样式:固体; } < div class = "边境”> 不缩进 < / div > < br > <div class="border缩进"> 缩进 < / div >