Small css bug when using customize-controls in customizer.php

[akissz]

The form code is wrong in the css for some elements. To reproduce problem, add in customizer.php custom two customize-control-radio and two customize-control-select. You see the 'radio' has extra 10px padding on bottom. The 'select' is missing the 10px padding. So it looks very bad when you organize the elements. So either remove the 10px or add the 10px to the 'select' css.

[aezazshekh]

Hello @akissz. Thank you for this ticket.

Can u send me screenshots? so I can understand better.

[akissz]

with padding on radio is ok

[akissz]

without padding on select is not ok

[akissz]

with padding on select is much better

[akissz]

Replying to aezazshekh:

Hello @akissz. Thank you for this ticket.

Can u send me screenshots? so I can understand better.

I uploaded 3 files so you can see now.

[akissz]

It might be best to remove the padding instead. What do you think?

[Boniu91]

It's reproducible on Twenty Twenty-One.

Test Report

Env

• WordPress 5.8 and 5.8.1
• Theme: Twenty Twenty-One

Steps to test

1. Go to the Customizer section
2. Choose Home page settings tab
3. Inspect Radio buttons (Your home page displays) and Select (Home page) sections
4. customize-control-dropdown-pages class doesn't have padding, customize-control-radio has padding

[dlh]

The extra padding on radio controls is relative to most (all?) control types, not just select controls. So I'm not sure that adding padding to just select controls addresses the concern.

The extra padding was added in [20184] and targeted specifically at radios, although it's not clear to me why. I don't have an installation of WordPress 3.4 available currently. Did the padding serve a purpose then that isn't relevant anymore?

[akissz]

Looking again, I think the padding should be removed from radio.