CSS/HTML checklist content alignment - html

Question

I'm having difficulty with the following code - everything works as I wish it EXCEPT the contents of the check boxes. The ticks and crosses are too low.
Can someone tell me what I am doing wrong here please? I admit I hacked this code from several sources and glued it together, so I'm more than happy to admit I have misunderstood something or other.
Thanks!
.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

Add line-height to .checkbox:before{...} set it to 20px, or play this number,
.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 2

Add line-height: 1.2; to your .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*/
}

Answer 3

.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>