CSS / HTML выравнивание содержимого контрольного списка

Question

У меня проблемы со следующим кодом - все работает так, как я хочу, КРОМЕ содержимого флажков.Тики и крестики слишком малы.

Может кто-нибудь сказать мне, что я здесь делаю неправильно, пожалуйста?Я признаю, что взломал этот код из нескольких источников и склеил его вместе, поэтому я более чем рад признать, что что-то неправильно понял.

Спасибо!

.checkbox {
  display: inline-block;
  float: left;
  width: 25%;
  font-size: 16px;
  line-height: 36px;
  text-align: left;
}

input[type=checkbox] {
  display: none;
}

.checkbox:before {
  display: inline-block;
  width: 18px;
  height: 18px;
  content: "\2715\0020";
  background-color: #f3f3f3;
  color: #000000;
  text-align: center;
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  border-radius: 3px;
  margin: 0px 10px 0px 0px;
  vertical-align: middle;
}

input[type=checkbox]:checked+.checkbox:before {
  color: #f3f3f3;
  background-color: #abcdef;
  content: "\2714\0020";
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}

<section>
  <form>
    <input id="option1" type="checkbox">
    <label class="checkbox" for="option1">Unchecked</label>
    <input id="option2" type="checkbox" checked>
    <label class="checkbox" for="option2">Checked, changeable</label>
    <input id="option3" type="checkbox" checked disabled>
    <label class="checkbox" for="option3">Checked, fixed</label>
    <input id="option4" type="checkbox" checked disabled>
    <label class="checkbox" for="option4">Checked, fixed</label>
    <input id="option5" type="checkbox">
    <label class="checkbox" for="option5">Unchecked</label>
  </form>
</section>

Answer 1

.checkbox {
  display: inline-block;
  float: left;
  width: 25%;
  font-size: 16px;
  line-height: 36px;
  text-align: left;
}

input[type=checkbox] {
  display: none;
}

.checkbox:before {
  display: inline;
  padding:2px;
  width: 18px;
  height: 18px;
  content: "\2715\0020";
  background-color: #f3f3f3;
  color: #000000;
  text-align: center;
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  border-radius: 3px;
  margin: 0px 10px 0px 0px;
  vertical-align: middle;
}

input[type=checkbox]:checked+.checkbox:before {
  color: #f3f3f3;
  background-color: #abcdef;
  content: "\2714\0020";
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}

<section>
  <form>
    <input id="option1" type="checkbox">
    <label class="checkbox" for="option1">Unchecked</label>
    <input id="option2" type="checkbox" checked>
    <label class="checkbox" for="option2">Checked, changeable</label>
    <input id="option3" type="checkbox" checked disabled>
    <label class="checkbox" for="option3">Checked, fixed</label>
    <input id="option4" type="checkbox" checked disabled>
    <label class="checkbox" for="option4">Checked, fixed</label>
    <input id="option5" type="checkbox">
    <label class="checkbox" for="option5">Unchecked</label>
  </form>
</section>

Answer 2

Добавьте line-height к .checkbox:before{...}, установите 20px или воспроизведите это число,

.checkbox:before {
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "\2715\0020";
    background-color: #f3f3f3;
    color: #000000;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    border-radius: 3px;
    margin: 0px 10px 0px 0px;
    vertical-align: middle;
    line-height: 20px;
}

Answer 3

Добавьте line-height: 1.2; к вашему .checkbox:before:

.checkbox:before {
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "\2715\0020";
    background-color: #f3f3f3;
    color: #000000;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    border-radius: 3px;
    margin: 0px 10px 0px 0px;
    vertical-align: middle;
    line-height: 1.2; /* add this*/ 
}