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样式来仔细检查这一点。如果您希望行为在两个元素之间保持一致，则可以使用CSS3中引入的box-sizing属性的值之一。 border-box值将元素填充和边框区域约束到指定宽度/高度

的元素

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

与提交元素相比，div

2 个答案: