Take, for example, these two scenarios. Both very similar HTML, but different semantically:
Scenario 1:
<label for="myCheckbox">
<input type="checkbox" id="myCheckbox" />
My Checkbox
</label>
Scenario 2:
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox">My Checkbox</label>
Both of these would appear to produce the exact same thing. However, they don't. The difference is the implicit space in between the checkbox and the label. In the first scenario, this space would also activate the checkbox because it is part of thee label. However, the second scenario would not because it's outside the label. These creates a small amount of space where, if the user clicked, it would not activate the checkbox as expected.
Depending on how set up the checkbox, there could be an even wider amount of space there. Such as if you floated the checkbox to the left and put a margin of 10, 15, or 20 pixels to the right.
Normally when I think of the UX, I try to make the entire related block all clickable for the same thing. To me, the left side of the checkbox all the way to the right side of its label should be part of one solid block which activate the control.
Should the space in between the checkbox and its label text also activate it? What are some (if any) circumstances in which you wouldn't want to do this?
for
attribute on the label is unnecessary when the checkbox it pertains to is inside the label.