我在文档中看到了这种模式：
<input type="checkbox" id="foo" /><label for="foo">Foo!</label>
但问题是，它在复选框及其标签之间留下了一个死区，您可以在其中单击标签，也可以单击框，但两者之间有一点间隙，单击不会执行任何操作，这有点像烦人。
显然，如果输入和标签标记之间有任何空格，情况会变得更糟。
为了解决这个问题，我尝试了以下方法：
<label for="foo"><input type="checkbox" id="foo" />Foo!</label>
这“对我有用”，因为它消除了框和文本之间的死角，并且更容易交互。 但它是合法且惯用的 HTML 吗？
但问题是，它在复选框及其标签之间留下了一个死区，您可以在其中单击标签，也可以单击框，但两者之间有一点间隙，单击不会执行任何操作，这有点像烦人。
显然，如果输入和标签标签之间有任何空格，情况会变得更糟。
为了解决这个问题，我尝试了以下方法：