Question

I'm having difficulty adding spacing between two radio buttons that are next to each other. They are too close to each other for my liking and I feel that it would look a lot better if I added some spacing in between. I'm talking about the width, not the height of them.

I've tried added padding and margin. I'm not too sure how exactly to add spacing in between.

<div class="style" style="width 100px; float:left; height 100px; margin:0px;">
<!-- this code asks the suer what clothing style they like. They have a lot of options. The code is like the gender code -->
Select a style: <br /> 
<label> <input type="radio" name="style" value="Casual" 
<?php 
if ($_POST['style'] == 'Casual') {
        echo "checked";
}
?>
/>Casual</label><br />

<label> <input type="radio" name="style" value="Athletic" 
<?php 
if ($_POST['style'] == 'Athletic') {
        echo "checked";
}
?>
/>Athletic</label><br />

<label> <input type="radio" name="style" value="Vintage" 
<?php 
if ($_POST['style'] == 'Vintage') {
        echo "checked";
}
?>
/>Vintage</label><br />

<label> <input type="radio" name="style" value="Formal" 
<?php 
if ($_POST['style'] == 'Formal') {
        echo "checked";
}
?>
/>Formal</label><br />

<label> <input type="radio" name="style" value="Streetwear" 
<?php 
if ($_POST['style'] == 'Streetwear') {
        echo "checked";
}
?>
/>Streetwear</label><br />

<label> <input type="radio" name="style" value="Rocker" 
<?php 
if ($_POST['style'] == 'Rocker') {
        echo "checked";
}
?>
/>Rocker</label>
</div>


<?php
if(($_POST['size'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
    echo "<strong>Please select a clothing size!</strong><br />";
}
?>

<div class="size" style="width 100px; float:left; height 100px; margin:0px;">
Select a size: <br />

<label> <input type="radio" name="size" value="Extra Small" 
<?php 
if ($_POST['size'] == 'Extra Small') {
        echo "checked";
}
?>
/>Extra Small</label><br />

<label> <input type="radio" name="size" value="Small" 
<?php 
if ($_POST['size'] == 'Small') {
        echo "checked";
}
?>
/>Small</label><br />

<label> <input type="radio" name="style" value="Medium" 
<?php 
if ($_POST['size'] == 'Medium') {
        echo "checked";
}
?>
/>Medium</label><br />

<label> <input type="radio" name="size" value="Large" 
<?php 
if ($_POST['size'] == 'Large') {
        echo "checked";
}
?>
/>Large</label><br />

<label> <input type="radio" name="size" value="Extra Large" 
<?php 
if ($_POST['size'] == 'Extra Large') {
        echo "checked";
}
?>
/>Extra Large</label><br />

<label> <input type="radio" name="size" value="2X Large" 
<?php 
if ($_POST['size'] == '2X Large') {
        echo "checked";
}
?>
/>2X Large</label>
</div>

I would like to know how to add spacing in between the two radio buttons so they are not super close to each other. I have not added any css to the div classes. Here is what it looks like now: mycode

Answer 1

只需在

的第一个div上应用margin-right: 50px;（更改值以适合您的需要）即可

<div class="style" style="width 100px; float:left; height 100px; margin-right: 50px;">

How to add spacing between two radio buttons that are next to each other

1 个答案: