Why padding in paper-radio-group?

[dballesteros7]

When putting paper-radio-button elements together vertically in a paper-radio-group, one gets something like this:

<div>Top</div>
<paper-radio-group style="display: flex; flex-direction: column;">
  <paper-radio-button>A</paper-radio-button>
  <paper-radio-button>B</paper-radio-button>
  <paper-radio-button>C</paper-radio-button>
  <paper-radio-button>D</paper-radio-button>
</paper-radio-group>
<div>Bottom</div>

The separation between the outer elements and the inner radios is half, because contiguous padding is not collapsed as contiguous margins. I think it would be better to have margins and that way have a constant separation inside and outside the group. Just a suggestion, I'd be happy to know if there is a strong reason to use padding.

[notwaldorf]

It's just there to make the radio group look better. Without any padding, the radio-buttons look pretty squished together:

I'm not sure why we prefer padding over margin (/cc @frankiefu for insight), but since the padding is applied to the content directly, to remove it/modify it you can just style the paper-radio-button itself, if you want:

paper-radio-button {
  padding: 0px;
  margin:12px;
}

[frankiefu]

The padding helps to increase the size of the tap target. I think the default for radio-button is about 16x16px and usually that's too small for mobile tap/touch target.

[dballesteros7]

Thanks! That definitely satisfies my curiosity, didn't think of mobile to be honest so that's why the double whitespace in between seemed like too much :)