The problem of form elements and prompt text not being aligned

Recent projects involve the creation of a lot of forms, especially checkboxes and radio buttons. However, during the front-end development process, it was found that the single (check) box and the prompt text behind them could not be aligned without any settings, and there was a big difference between Firefox and IE. Even if vertical-align: middle is set, it still cannot be perfectly aligned. As shown in the following figure:

So I checked some websites online and found that this problem is common, as shown in the following figure (FF3.5):

In many websites that involve form pages, there is a problem that the form elements and prompt text cannot be aligned. So I decided to study this issue. First, I searched for wheatlee’s article “Everyone has their own opinions on vertical-align”. Wheatlee mentioned several key points about vertical centering in his article:

1. When vertical-align: middle is used, the center of the element is aligned with the center of the surrounding elements.

2. The definition of "center" here is: the image is of course half the height, and the text should be 0.5ex up from the baseline, that is, the center of the lowercase "x". However, many browsers often define the ex unit as 0.5em, so it is not necessarily the exact center of x (if you don’t understand terms like baseline, please read wheatlee’s article first)

Following this line of thought, and comparing it with the problem I encountered, the first thing that came to my mind was to verify whether the browser uses the same rules to render the "check box" and the image (whether it treats the check box as a square image). So write the following code:

<style>
body{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
Test text

The testpic.gif in the code is a black image that is exactly the same size as the check box. The display under FF3.5 is as follows: