html - Labels displaying slightly below form checkbox? -

i want text display inline form checkbox - , far know, appropriate code. reason, text falling beneath check box? see screen shot , code below.

style.css

input, textarea, select, .uneditable-input {   border: 2px solid #dbdbdb;   width: 100%;   margin-bottom: 15px;   margin-top: 15px;   border-radius: 5px;   padding: 10px;  }  input {     height: 35px;    width: 325px;    font-size: 16px; }  input[type="radio"], input[type="checkbox"] {      width: 30px;  }     label {          font-size: 18px;         display: inline-block;         font-weight: lighter;         vertical-align: top;     }          label[for=receive_newsletters] {              font-size: 12px;             display: inline-block;          }          label[for=terms_accepted] {              font-size: 12px;             display: inline-block;          } 

new.html.erb

    <label for="receive_newsletters"><%= f.check_box :receive_newsletters %> receive newsletters</label>     <label for="terms_accepted"><%= f.check_box :terms_accepted %> agree terms of service & privacy policy</label>      <%= f.submit :register %>   <% end %> 

you should remove height: 35px; input or specify height: auto input[type=checkbox]