css - 与 div 相比的提交元素

Question

当我有一个提交/按钮元素并分配一个固定值时，将从宽度中减去填充。当我将此应用于普通 div 元素时，填充会添加到宽度中。

有人能指出我在哪里解释了这种行为吗？

.green_submit { 
    color: #fff; 
    background-color: #94c909; 
    padding: 25px; 
   width: 200px;

}

<input type="submit" class='green_submit' value="Validate" />

将导致宽度为 146px。

<div class="green_submit"></div>

将导致宽度为 200px

http://jsfiddle.net/nnnS3/29/

Answer 1

两者box-sizing之间并不一致。用于box-sizing: border-box将填充和边框包含在宽度中。

http://jsfiddle.net/nnnS3/30/

或者，content-box两者都使用（但<div>没有边框）：

http://jsfiddle.net/nnnS3/31/

Answer 2

border-box输入元素和大多数表单控件的属性默认值为box-sizing.. 您可以通过扫描浏览器开发人员工具中的默认 UA 样式来仔细检查这一点。如果您希望两个元素之间的行为保持一致，您可以使用box-sizingCSS3 中引入的属性值之一。该border-box值将元素填充和边框区域限制为指定宽度/高度的元素

.green_submit {
box-sizing: border-box; /* | padding-box (support is bad) | content-box */
}