Float right causes vertical shift by 2px

Question

I'm designing a login modal window. I'm having issues with vertical alignment of "Forgot password?" link.

I'm using the following code for left (for "Remember me") and right (for "Forgot password?") alignment in the same line.

<div>
  <span style="float:left;">
    <input type="checkbox" style="margin-left:0;vertical-align:-1px;"/><label>Remember me</label>
  </span>
  <a href="password_retrieve.php" style="float:right;">Forgot password?</a>
  <div style="clear:both;"></div>
</div>

This snippet works perfectly when used alone. However, inside my modal window, the "Forgot password?" link shifts vertically upwards by 2px for some reason.

I tried to find the difference in alignment by inserting a similar structure (before the above structure) where "Forgot password?" link has a margin-left value.

<div>
  <span>
    <input type="checkbox" style="margin-left:0;vertical-align:-1px;"/><label>Remember me</label>
  </span>
  <a href="password_retrieve.php" style="margin-left:150px;">Forgot password?</a>
</div>

I used margin-top to perfectly overlap these two structures.

Outside the modal window I get perfect overlap. (Code)

However, inside the modal, the "Forgot password?" link doesn't overlap perfectly. (Code)

I know I can solve this issue by adding a margin-top: 2px; to the a tag for "Forgot password?". But I want to know the reason behind this behaviour. Please let me know where I've gone wrong.

Answer 1

It has something to do with vertical-alignment. Vertical align is being applied only to inline level and table-cell elements - block level elements are outside of this group.
Default value for vertical-align is baseline, which as name suggest, aligns all content of your inline elements to the baseline.
Now when you float elements either to right or left, their display property is being automatically changed by browsers to display:block (and there is no way to override this). Therefore vertical alignment of floated elements' content, changes too - vertical-align stops making any sense for these lements. I've created fiddle to show this here.
This explains your vertical 2px shift to the top on floated link, which will simply align to the top edge of its parent.
To proof that, just apply vertical-align: top; to the <a> tag of your non-floated elements (by the way I needed to change margin-left to 146px, to prevent this link to wrap to another line, to reproduce whole behavior).
Now you have your "perfect overlap", but real thing is to deal with this problem:

I would suggest to use flexbox instead of floats, so your code could looks like this:

HTML:

<div style="margin-top: -19px; display: flex;justify-content: space-between;align-items: baseline;">
     <span>
       <input type="checkbox" style="margin-left:0;vertical-align:-1px;"><label>Remember me</label>
     </span>
     <a href="password_retrieve.php">Forgot password?</a>
</div>   

I have included all css inline on parent div container, so you'll need to move it to external file, but you have an idea.
So forget about floats, delete div which clears the floats, and perhaps start using flexbox.
Browser support for Flexbox is pretty decent nowadays and with some tweener syntax covers even IE10.

Hope this makes sense.