How to get Radio button to follow label?

Hi everyone,

I’m working on the survey form project for Responsive Web Design Certification and I was having issues in regards to the radio buttons. It seems to me that applying padding or margin rules in css to the radio element doesn’t do anything. On the other hand, applying padding rules to the actual LABEL works. How would I get the radio button to follow with the label? Here’s my codepen project for a visual:

Lines 33-34 in HTML are where the radio and label elements are


Lines 77-85 in CSS are where my CSS rules are applied for those elements.

You’ll see that the radio button is stuck all the way to the left whilst the Label element is more in line with the rest of the elements. What am I doing wrong here? Any help is appreciated.

The container it’s in has no padding. The label has stuff inside it, so applying padding is going to have a visual effect. The radio button has nothing inside it, you can’t pad it.

Ah okay that’s understood. If that’s the case, is there a way I can have the radio button attached to the label instead of having it stuck to the side of the html line? Without padding or margins or anything?

It doesn’t “attach” or “stick”.

CSS treats HTML elements as rectangular boxes. You put other elements in the boxes.

You can add padding to a box to push the things in the box away from the sides.

You can add margins to the box to push it away from sibling boxes.

Some elements don’t let you put anything inside, as it doesn’t make sense (like images, or videos, or radio buttons).

Label is a box you can put things in: text, normally. The div that the label and the radio button are in, that’s a box you can put things in. So add padding to the div, or put the radio button in the label

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.