Unclickable gap between mdc-checkbox and label (mdc-form-field)

[anton-kachurin]

What MDC-Web Version are you using?

0.5.0

What browser(s) is this bug affecting?

Chrome, Firefox

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

1. go to http://material-components-web.appspot.com/checkbox.html
2. click in between any checkbox and its label a few times
3. note that there is a 4px-wide gap between these elements clicking on which doesn't change the state of the checkbox

What is the expected behavior?

The space between mdc-checkbox and label (wrapped in mdc-form-field) must be clickable on all its width.

Any other information you believe would be useful?

The same applies to mdc-radio.
Buggy behavior is caused by the margin set to the label element. Maybe using padding instead will solve it.

[traviskaufman]

It makes sense that the checkbox and label area should be entirely clickable.

In order to fix this we need to change mdc-form-field from using margin-left (margin-right for RTL) to padding-left (padding-right). Note that the auto margin values should stay the same to preserve flexbox behavior.