CSS特有の問題（？）

Question

私は完全なCSS初心者です。私の背景はバックエンド開発です。だから事前に無知を許してください。

私は、CSSのアプリケーション（または実際の使用）についてもう少し詳しく知ろうとしています。

を考えると、次のCSS：

.input-size { 
    height: 25px; 
    width: 250px; 
} 

私はWordPressのページ内のHTMLの次の行が奇数結果を生成する理由を把握しようとしている：

<input type="text" placeholder="Search" class="input-size"> 

私は、問題がなければならないと考えています私は上記のスタイルに重い重みを与える方法については不明です。

次の画像は、私が期待するものである：

はお知らせ要素の下部と下のキャンバスの間の間隔。

しかし、私はテキストボックスにスタイルを適用するとき、私は以下の取得：

あり下部に25ピクセルのパディングについてのように見えるが、それはスタイルで指定されていません上記の投稿。

今後の進歩についてアドバイスをいただければ幸いです。残念ながら、この問題の原因となるものが何であるかを把握する方法を知りません。

ありがとうございました！

Answer 1

あなたが持っているものは正しいですが、新しいクラスでは埋め込みが定義されていません。最も起こりそうなのは、inputのためにパディングが定義され、デフォルトのスタイルからプロパティを継承するということだけです。あなたがそれを検査したので - マージンのルールをトレースします。 CSSで

Answer 2

は、

padding : 0; 

を指定してみてくださいだから、次のようになります。 "テキストボックス" と

.input-size { 
    height: 25px; 
    width: 250px; 
    padding:0; 
}