パディングを使用する場合、HTML/CSSを使用してテキストボックスをフォームの中央に配置するにはどうすればよいですか？

Question

私はどこにでも見てきましたが、私はこれを見つけることができないので、これは愚かな質問かもしれません。

基本的に、私は私のページの中に集中したいテキストボックスを持っています。しかし、私はテキストボックスの内側にパディングを使用するので、テキストは境界のすぐ隣にはありません。

どうすればよいですか？

問題のウェブサイト：http://prntscr.com/c2m93u ご覧のとおり、左側の距離は右側の&と同じではありません。これは、パディングを使用するために発生します。

マイコード：

<input type="text" name="username" value="Gebruikersnaam", id="TextField" style="width:100%;height:25px;background-color:black;color:white;border:0px;margin:auto;padding-left:4px;padding-right:4px;"> 

任意の助けもいただければ幸いです。前もって感謝します。

Answer 1

box-sizing: border-boxを使用してください。こうすることで、要素の合計幅に要素のパディングが含まれます。詳細については、Box Model on MDNを参照してください。

Answer 2

HTML

<div> 
<input type="text" name="username" value="Gebruikersnaam", id="TextField"> 
</div> 

CSS

* 
    { 
    box-sizing: border-box; 
    } 
div 
{ 
    width:100vw; 
    margin:auto; 
    text-align:center; 
    background-color:rgba(70,70,70,1); 
    padding:15px; 
} 
input[type='text'] 
{ 
    width:80%; 
    margin:auto; 
    height:25px; 
    background-color:black; 
    color:white; 
    border:0px; 
} 

FIDDLE：https://jsfiddle.net/uo30v0jp/