Unnecessary space in html - html

Question

I'm new to HTML and I'm trying to replicate Google's home page for practice purpose.
My code is like this:
<div align="right" style="border: 1px solid">
Gmail Images Sign in
</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" /> <input type="button" value="I'm feeling lucky" size="100" />
</div>
And I'm getting following output:
Output Screenshot
I'm not getting why there is space above my TextBox and above the Buttons.
How do I remove these spaces?
Any help would be appreciated.
Regards,
Parikshit

Answer 1

You've set font-size: 500% so the line height (of the line in the inputs sit on the baseline of) is very tall.
Don't do that.

Answer 2

To avoid coming into any problems with basic css styling when getting to use to browser display try using this every time you use css:
CSS:
*{
padding:0px;
margin:0px;
border:solid black 0px;
color:#5f5;
text-decoration:none;
box-sizing:border-box;
overflow-x:hidden;
}
It is a good way as this helps gain more control of how you want your page to look the only downfall is that using this means you may have to set the attributes from here again into the other css styles as this effects everything.
It may seem like too much but can help in the long run.