Html 如何防止填充属性更改 CSS 中的宽度或高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/779434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I prevent the padding property from changing width or height in CSS?
提问by Sam
I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example):
我正在创建一个带有DIVs的站点。除了创建 DIV 时，一切都正常。我像这样创建它们（示例）：
newdiv {
width: 200px;
height: 60px;
padding-left: 20px;
text-align: left;
}
When I add the padding-leftproperty, the width of the DIVchanges to 220px, and I want it to remain at 200px.
当我添加padding-left属性时，宽度DIV更改为 220 像素，我希望它保持在 200 像素。
Let's say I create another DIVnamed anotherdivexactly the same as newdiv, and put it inside of newdivbut newdivhas no padding and anotherdivhas padding-left: 20px. I get the same thing, newdiv's width will be 220px.
假设我创建了另一个与 完全相同的DIV名称，并将它放在里面但没有填充并且有. 我得到同样的东西，的宽度将为 220px。anotherdivnewdivnewdivnewdivanotherdivpadding-left: 20pxnewdiv
How can I fix this problem?
我该如何解决这个问题？
回答by Pramod
Add property:
添加属性：
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
Note:This won't workin Internet Explorer below version 8.
注意：这在低于版本 8 的 Internet Explorer 中不起作用。
回答by rvarcher
Put a div in your newdiv with width: autoand margin-left: 20px
在你的 newdiv 中放置一个 divwidth: auto和margin-left: 20px
Remove the padding from newdiv.
从 newdiv 中删除填充。
回答by Ajay Gupta
Try this
尝试这个
box-sizing: border-box;
回答by mvndaai
If you would like to indent text within a div without changing the size of the div use the CSS text-indentinstead of padding-left.
如果您想在 div 中缩进文本而不更改 div 的大小，请使用 CSStext-indent而不是padding-left.
.indent {
text-indent: 1em;
}
.border {
border-style: solid;
}<div class="border">
Non indented
</div>
<br>
<div class="border indent">
Indented
</div>回答by Felix Wong
simply add box-sizing: border-box;
只需添加 box-sizing: border-box;
回答by Guffa
when I add the padding-left property, the width of the DIV changes to 220px
当我添加 padding-left 属性时，DIV 的宽度更改为 220px
Yes, that is exactly according to the standards. That's how it's supposed to work.
是的，这完全符合标准。这就是它应该如何工作。
Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px;
假设我创建了另一个与 newdiv 完全相同的名为 anotherdiv 的 DIV，并将其放在 newdiv 内，但 newdiv 没有填充，而 anotherdiv 具有 padding-left: 20px。我得到了同样的东西，newdiv 的宽度将是 220px；
No, newdiv will remain 200px wide.
不，newdiv 将保持 200px 宽。
回答by sean
just change your div width to 160px if you have a padding of 20px it adds 40px extra to the width of your div so you need to subtract 40px from the width in order to keep your div looking normal and not distorted with extra width on it and your text all messed up.
只需将您的 div 宽度更改为 160px，如果您有 20px 的填充，它会为您的 div 的宽度增加 40px，因此您需要从宽度中减去 40px 以保持您的 div 看起来正常并且不会因额外的宽度而扭曲，并且你的文字都搞砸了。
