輸入按鈕不會延伸到在CSS中設置的寬度？

Question

我試圖做一個簡單的形式，並在其中我有一個文本框和一個按鈕。不過，爲了測試目的，我將兩者的寬度都設置爲500px，並且文本字段的長度正確，但提交按鈕的像素少了12個像素？

下面的代碼：

input, 
 
textarea { 
 
    width: 500px; 
 
}

<label>Name</label><br> 
 
<input name="name" placeholder="Your name..."> 
 

 
<br> 
 
<br> 
 

 
<label>Message</label><br> 
 
<textarea name="message" placeholder="Your message..."></textarea> 
 

 
<br> 
 
<br> 
 

 
<input id="submit" name="submit" type="submit" value="Submit">

消息框和名稱框都是正確的寬度，但提交按鈕大約是10個像素少。

編輯：解

感謝幫助下，我找到了解決辦法，以

box-sizing: border-box 

添加到CSS的輸入& textarea的需要，現在它工作正常。

Answer 1

您可以使用box-sizing: border-box;包括填充和邊界（由默認值）到您的寬度。有關框尺寸的更多信息，請參閱MDN。

input, 
 
textarea { 
 
    width: 500px; 
 
    box-sizing: border-box; 
 
}

<input name="name" placeholder="Your name..."> 
 
<textarea name="message" placeholder="Your message..."></textarea> 
 
<input id="submit" name="submit" type="submit" value="Submit">

Answer 2

設置的兩個框邊箱箱尺寸改變盒模型

input, 
 
textarea { 
 
    width: 500px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
}

<label>Name</label> 
 
<br> 
 
<input name="name" placeholder="Your name..."> 
 
<br> 
 
<br> 
 

 
<input id="submit" name="submit" type="submit" value="Submit">

Answer 3

什麼，你可能是通過「少12個像素」的意思是6個像素的填充（因此Chrome的開發者工具顯示「484x15」爲按鈕）

但是，填充是元素的一部分，所以按鈕的總大小實際上是500px預計，你可以撥弄如果要更改此行爲，請使用box-sizing。

input { 
    box-sizing: border-box; 
}