Here is the code snippet:
<p><input type="checkbox" /> Pavement
<input type="checkbox" /> Dirt or rocky trails
<input type="checkbox"/> Gravel roads</p>
As well as the accompanying CSS:
h1, input, button, textarea, progress, p, a, ul, li {
font-family: "Open Sans", sans-serif;
font-size: 10pt;
color: #666;
letter-spacing: normal;
text-indent: 0;
text-shadow: 0 1px 0 hsla(0,0%,100%,.75);
margin: 10px 2px;
}
input[type="checkbox"], input[type="radio"] {
background-color: #f4f4f4;
background-image: -webkit-linear-gradient(90deg, hsla(0,0%,0%,.05), hsla(0,0%,0%,.01));
box-shadow: inset 0 1px 0 hsla(0,0%,100%,.5),
0 1px 2px hsla(0,0%,0%,0.5);
border: none;
cursor: pointer;
height: 16px;
width: 16px;
position: relative;
-webkit-appearance: none;
}
The checkboxes appear to be very close together in relation to the surrounding text. Removing all of the CSS seemed to fix the issue, but once I started removing/replacing individual lines of CSS, I couldn't pinpoint the problem. Any suggestions on what may be causing this? Thank you!