Html - Why do my checkboxes and radio buttons have weird spacing?

charlie
August 27, 2024
155 views
0 votes
2 Answers

I’m just getting started with HTML and CSS (via freeCodeCamp) and struggle with my first certification project: building a survey form. Everything went well up to the point where I needed to add checkboxes and radio buttons. There’s a huge amount of space between the clickable box/button and the corresponding label, and I can’t get all of this content to be centered to the left.

I tried experimenting with different margin and padding values, as well as text-align and display options. It had hoped I would end up with something like this:

My pronouns are: [] she/her 
                 [] he/him
                 [] they/them

Choose one: () Yes
            () No
            () Maybe

However, it just looks really messy and nothing I’ve tried changed anything in how this displays.
This is what it looks like right now:

My pronouns are:          []          she/her 
                 []          he/him
                 []          they/them

Choose one:           ()          Yes
            ()          No
            ()          Maybe

My Code:

body {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100vh;
margin: 0;
font-family: Futura;
}

fieldset {
margin-top: 20px;
background-color: pink;
width: 70%;
border: 3px solid #ffffff;
border-radius: 5px;
}

legend {
background-color: grey;
color: #ffffff;
border: solid;
border-radius: 10px;
padding: 2px 5px;
}

input {
width: 50%;
background-color: #ffffff;
color: grey;
margin: 5px;
font-family: Futura;
} 

input[type=submit], input[type=reset] {
background-color: skyblue;
color: #000000;
width: 25%;
margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}

<fieldset>
  <legend>Checkbox area</legend>
  <div>
    My pronouns are:
    <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
    <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
    <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
    <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
    <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
  </div>
</fieldset>

Answers

I am not sure what exactly you mean by weird spacing, but here goes my attempt.

<fieldset>
  <legend>Checkbox area</legend>
  <p>My pronouns are:</p>

  <div>
    <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
    <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
    <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
  </div>
  <div class="radio">
    <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
    <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
    <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
  </div>
</fieldset>

and CSS

body {
  background-color: #000000;
  color: #ffffff;
  width: 100%;
  height: 100vh;
  margin: 0;
  font-family: Futura;
}

fieldset {
  margin-top: 20px;
  background-color: pink;
  width: 70%;
  border: 3px solid #ffffff;
  border-radius: 5px;
}

legend {
  background-color: grey;
  color: #ffffff;
  border: solid;
  border-radius: 10px;
  padding: 2px 5px;
}

input {
  background-color: #ffffff;
  color: grey;
  margin: 5px;
  font-family: Futura;
}

input[type="submit"],
input[type="reset"] {
  background-color: skyblue;
  color: #000000;
  width: 25%;
  margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}

Demo

Also, why don’t you use flexbox or grid? What kind of layout are you trying to achieve?

Just add the parent class which is flex and wrap the label and input in a common div.

body {
background-color: #000000;
color: #ffffff;
width: 100%;
height: 100vh;
margin: 0;
font-family: Futura;
}

fieldset {
margin-top: 20px;
background-color: pink;
width: 70%;
border: 3px solid #ffffff;
border-radius: 5px;
}

legend {
background-color: grey;
color: #ffffff;
border: solid;
border-radius: 10px;
padding: 2px 5px;
}

input {
width: auto;
background-color: #ffffff;
color: grey;
margin: 5px;
font-family: Futura;
} 

input[type=submit], input[type=reset] {
background-color: skyblue;
color: #000000;
width: 25%;
margin-top: 15px;
}

.textarea {
  font-family: Futura;
  color: grey;
  font-size: 14px;
}
.flex {
    display: flex;
    margin-bottom: 20px;
}

<fieldset>
  <legend>Checkbox area</legend>
  <div class="flex">
    My pronouns are:
    <div class="clust">
      <div class="ch-wrap">
          <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
      </div>
      <div class="ch-wrap">
          <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
      </div>
      <div class="ch-wrap">
          <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
      </div>
      </div>
  </div>
  <div class="flex">
    Choose One
      <div class="radio">
        <div class="ch-wrap">
          <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
        </div>
        <div class="ch-wrap">
          <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
        </div>
        <div class="ch-wrap">
          <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
        </div>
      </div>
   </div>
</fieldset>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Why do my checkboxes and radio buttons have weird spacing?

Answers