htmlの不必要なスペース

Question

私はHTMLが新しく、私は実践目的でGoogleのホームページを複製しようとしています。
私のコードは次のようである：

<div align="right" style="border: 1px solid"> 
 
    <a href="">Gmail</a>&nbsp;&nbsp;<a href="">Images</a>&nbsp;&nbsp;<a href="">Sign in</a> 
 
</div> 
 
<!-- Google Text --> 
 
<div align="center" style="font-size: 500%; border: 1px solid"> 
 
    <font color="#4885ed">G</font> 
 
    <font color="#db3236">o</font> 
 
    <font color="#f4c20d">o</font> 
 
    <font color="#4885ed">g</font> 
 
    <font color="#3cba54">l</font> 
 
    <font color="#db3236">e</font> 
 
</div> 
 
<div align="center" style="font-size: 500%; border: 1px solid"> 
 
    <input type="Text" size="50" /> 
 
</div> 
 
<div align="center" style="font-size: 500%; border: 1px solid"> 
 
    <input type="button" value="Search" size="100" />&nbsp;&nbsp;<input type="button" value="I'm feeling lucky" size="100" /> 
 
</div>

そして、私は次の出力取得しています：私のTextBoxの上の空間があるなぜ私が届かない

Output Screenshot

をボタンの上。 これらのスペースを削除するにはどうすればよいですか？

ご協力いただければ幸いです。

よろしく、
パリクシット

Answer 1

あなたがfont-size: 500%設定したので、行の高さ（入力中の行のベースラインの上に座る）が非常に高いです。

しないでください。あなたがcssを使用するたびに、これを使用してみてくださいブラウザの表示に使用するようになったときに、基本的なcssスタイリングを持つ任意の問題に来て回避するために

Answer 2

：

CSS：

*{ 
    padding:0px; 
    margin:0px; 
    border:solid black 0px; 
    color:#5f5; 
    text-decoration:none; 
    box-sizing:border-box; 
    overflow-x:hidden; 
} 

それはこのように良い方法ですあなたのページが唯一の崩壊に見えるようにする方法をより詳細に制御することができます。これは、このことから他のCSSスタイルに属性を設定しなければならないことを意味します。

あまりにも多くのように見えるかもしれませんが、長期的に役立つことがあります。