title: Problem with <input> positioning in HTML/CSS
body: <p>Hey guys,
  I'm a total HTML and CSS noob who was just coding his offline website when he ran across a problem.</p>
  
  <p>I have a div in which I have positioned several elements using absolute positioning. But when I try to position an input field, it does not vertically lign up with the other text. Here's an example:</p>
  
  <pre><code>&lt;div id="TopBar"&gt;
  [...]
  &lt;h2 class="SubTitle" style="position:absolute; top:50px; left:75%;"&gt;Username: &lt;/h2&gt;
  &lt;input type="text" name="username" style="display:inline; positon:absolute; top:50px; right: 5%;" /&gt;
  </code></pre>
  
  <p>When i run this code, the input field is about 30 pixels further up than the "Username:". Why is that, even though both have "top: 50px"? </p>
  
  <p>Through testing, I have discovered that the code works properly without the div around it. Why is that?</p>
  
  <p>I know my coding is really bad, please explain to me what I did wrong.</p>