how can I achieve spacing between checkboxes

Question

how can I achieve spacing between checkboxes

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I have a div which contains checbox and I would like to be able to separate them from each other a little more, because they are very close, someone could help me please.

This is my code:

    <div class="form-group">
                        <label>
                            <input type="checkbox" class="minimal form-control" name="sun" data-field="Sun">
                            Sun
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="mon" data-field="Mon" style="padding:10px;">
                            Mon
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="tue" data-field="Tue">
                            Tue
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="wed" data-field="Wed">
                            Wed
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="thu" data-field="Thu">
                            Thu
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="fri" data-field="Fri">
                            Fri
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="sat" data-field="Sat">
                            Sat
                        </label>
                    </div>

javascript html5 ccs

asked by Raidel Fonseca 15.10.2018 в 22:49

source

3 answers

How to ignore a folder when you have made uploads? problem with checkbox and php

score 1 · Answer 1

The simplest thing you can do is add the margin-right property to your label and add all the spacing you want. I added a class called .add-margin to the tag head , and then add that class to all label , so you will be more comfortable trying the margin you want

.add-margin {
    margin-right: 10px
}

    <div class="form-group">
        <label class="add-margin">
          <input type="checkbox" class="minimal form-control" name="sun" data-field="Sun">
          Sun
        </label>
        <label class="add-margin">
          <input type="checkbox" class="minimal form-control" name="mon" data-field="Mon" style="padding:10px;">
          Mon
        </label>
        <label class="add-margin">
          <input type="checkbox" class="minimal form-control" name="tue" data-field="Tue">
          Tue
        </label>
        <label class="add-margin">
          <input type="checkbox" class="minimal form-control" name="wed" data-field="Wed">
          Wed
        </label class="add-margin">
        <label>
          <input type="checkbox" class="minimal form-control" name="thu" data-field="Thu">
          Thu
        </label class="add-margin">
        <label class="add-margin">
          <input type="checkbox" class="minimal form-control" name="fri" data-field="Fri">
          Fri
        </label>
        <label class="add-margin">
          <input type="checkbox" class="minimal form-control" name="sat" data-field="Sat">
          Sat
        </label>
      </div>

score 1 · Answer 2

just select them directly from css and give them a margin to your liking

input[type=checkbox]{

   margin:10px !important;
   

}

div class="form-group">
                        <label>
                            <input type="checkbox" class="minimal form-control" name="sun" data-field="Sun">
                            Sun
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="mon" data-field="Mon" style="padding:10px;">
                            Mon
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="tue" data-field="Tue">
                            Tue
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="wed" data-field="Wed">
                            Wed
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="thu" data-field="Thu">
                            Thu
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="fri" data-field="Fri">
                            Fri
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="sat" data-field="Sat">
                            Sat
                        </label>
                    </div>

score 0 · Answer 3

Because you do not use margin-left like this:

.minimal {
    margin-left:40px;
}

 <div class="form-group">
                        <label>
                            <input type="checkbox" class="minimal form-control" name="sun" data-field="Sun">
                            Sun
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="mon" data-field="Mon" style="padding:10px;">
                            Mon
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="tue" data-field="Tue">
                            Tue
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="wed" data-field="Wed">
                            Wed
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="thu" data-field="Thu">
                            Thu
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="fri" data-field="Fri">
                            Fri
                        </label>
                        <label>
                            <input type="checkbox" class="minimal form-control" name="sat" data-field="Sat">
                            Sat
                        </label>
                    </div>