Question

如果问过这个问题，我道歉，但我找不到完全相同的问题。正如W3schools所说，高度属性不包括填充，边框或边距！ (link)。所以这是一个简单的样式声明：

input {
  width:180px;
  height:18px;
  padding:7px;
  border:1px solid black;
}

这是html：

<input type='text' name='text' value='194px by 32px' /><br  />
<input type='submit' name='button' id='button' value='180px by 18px' />

文本字段按预期方式为194像素x 32像素，但提交按钮为180像素×18像素。显然，我可以增加高度和高度。按钮的宽度是填充的两倍，但我想了解为什么存在差异。我在这里做了一个jsfiddle：http://jsfiddle.net/RRf5A/。谢谢你的帮助。仅供参考，我已尝试<button>而不是输入提交，display:inline-block。

Answer 1

您可以通过将box-sizing: content-box;添加到提交类型的输入元素来解决此问题。我不会自己详细介绍，而是将您送到http://www.quirksmode.org/css/box.html。但是，它目前并不是全面支持，因此您可能会发现跨浏览器兼容性更好，专门为提交按钮声明不同的高度和填充。

CSS填充添加到<input type =“submit”/>的高度/宽度

1 个答案: