ラベルと入力の幅がCSSと同じでない

このページとそのCSSはここにありますが、ラベルと入力に同じ幅を定義していますが、ブラウザで幅が違うのはなぜですか？ラベルと入力の幅がCSSと同じでない

html, body{ 
 
    font-family: Consolas; 
 
    font-size: 12px; 
 
} 
 

 
label{ 
 
    display: block; 
 
    border:1px solid rgb(230,230,230); 
 
    width: 200px; 
 
    padding: 10px; 
 
} 
 

 
input[type=text]{ 
 
    font-family: inherit; //without this the font is default 
 
    font-size: inherit; //without this the font is default 
 
    display: block; 
 
    border:1px solid rgb(230,230,230); 
 
    width: 200px; 
 
    padding: 10px; 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="input.css"> 
 
    </head> 
 
    <body> 
 
    <form> 
 
     <label>USER NAME</label> 
 
     <input type="text" placeholder="USER NAME" name="user_name"/> 
 
    </form> 
 
    </body> 
 
</html>

私は初心者だ、そう私を助けてください。

出典

2016-11-18 john smith

が完璧です。問題は何ですか？例https://jsfiddle.net/patelsumit5192/qdfnek77/ –

こちらをご覧ください。ブラウザでのレンダリングのスクリーンショットを添付できますか？ – mrid

しかし、私のGoogleクロムでは、入力ボックスはラベルよりも小さいです！ –

、デフォルトのボックスサイズは「ボーダー・ボックス」で、それは意味：

などのブラウザで幅=コンテンツの幅+ボーダー幅+パディング幅

あなたのラベルが220pxです

しかし他では、デフォルトのボックスサイズは、「コンテンツ・ボックス」であり、それは意味：

幅=コンテンツ幅

01このようなブラウザで

あなたのラベルが200pxの

ので、ちょうど箱のサイズ変更のすべての要素のために設定されます。

*{ 

    -webkit-box-sizing: border-box ; 

    -moz-box-sizing: border-box ; 

    box-sizing: border-box; 

}

または

ラベルのみのため、この設定

*{ 

    -webkit-box-sizing: content-box ; 

    -moz-box-sizing: content-box ; 

    box-sizing: content-box; 

}

もOKですが、設定すべてが簡単ですので、

出典

2016-11-18 05:49:59

ありがとうChibiao Wang、私はそれを私の心に留めておきます！ –

スタイルプロパティ「box-sizing：border-box;」を使用します。ラベルのために。一部のブラウザで

label { 
display: block; 
border: 1px solid rgb(230,230,230); 
width: 200px; 
padding: 10px; 
box-sizing: border-box; 
}

出典

2016-11-18 05:33:19 Jon

なぜ私が働いていないのか教えていただけますか？ –

私は<！DOCTYPE html>を自分のhtmlに追加しました。しかし、私はなぜそれが<！DOCTYPE html>なしで動作していないのかを知りたいと思っています。 –

ラベルと入力の幅がCSSと同じでない

答えて

関連する問題