I think this happens the line-height within the vform is 17.25 while the line-height outside the form in the "call to action" is 22.4px

I'm not sure, if this exactly is the reason. If you use an input tag instead of an a-tag for the "Join Wikipedia" link, you'll get a button, which has exactly the same hight:

Both items are wrapped in the form and a mw-ui-vform div element. It seems, that (at least Chrome, I don't know, how FF/Safari handles it) line-height is handled different for an element, if it is inherited by another element (in this case: bodycontent / mw-body-content), see this little example, e.g.. I think the easiest way would be to use an input tag for the link. A cleaner way would be to apply the correct line-height to all a-tags with mw-ui-button. Let me upload a change :)