好吧问答库 > CSS中，input添加padding-left:30px后被推长的问题。

CSS中，input添加padding-left:30px后被推长的问题。

2024年10月28日 12:48

有3个网友回答

网友（1）：

最简单的解决办法就是不用padding-left，改用text-indent：
text-indent: 30px
（我上次回答你的问题时不就是这样的吗？你也不想想我为什么不用padding？）
原因：元素的实际宽度=width+border+padding，所以如果padding不为0，元素的实际宽度就会被拉宽了。而text-indent是段落前空位（就是写文章时每一段前面的空格），不会影响到元素的实际宽度。

网友（2）：

因为padding是要占宽度的，所以你的宽度要相应的减少30px

网友（3）：

你在input上面加上这个试试，我敲了这么久代码也是最近才发现有这个问题。。。这是让input的宽度等于内边距。
box-sizing: border-box;//其他浏览器
-webkit-box-sizing: border-box;//谷歌
-moz-box-sizing: border-box;//火狐