Add spacing between radio buttons

0
Hello guys! I have a radio button widget with optons. It has vertical orientation.   The thing is, I want to add some spacing between the options, how can I achieve this using css? Already tried with the following class: .radio-buttons{ font-family: "Open Sans"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; margin: 0 10px 0 10px; }   Any idea how can this be done?
asked
3 answers
0

I think the name of the radio button is...

.mx-radiogroup .radio{
margin: 0px 10px 0px 10px !important;
}

 

If you create your own class, that is

.radio-buttons .radio{
margin : 0px 10px 0px 10px;
}

 

i hope this help.

answered
0

You can also make use of Flex gaps. This will only fill in the spaces between radio buttons and is a bit more responsive.

 

.mx-radiogroup{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

 

Or if you want to create your own class:

.your-class-name .mx-radiogroup{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

 

Good luck!

answered
0

.radio-buttons input[type="radio"] {

    margin-bottom: 10px;

}

.radio-buttons label {   

display: block;

}

 

Try This

 

answered