css3 - CSS label lose margin/padding -


i'm unable lose padding and/or margin between 2 of radiobutton's labels.

this have far: http://jsbin.com/putoz/6/edit

what i've tried far:

  • forcing width of outer div
  • forcing margin-rigth/left , padding-right/left 0px on both labels

easiest way make labels block elements , float them:

demo

label {       width: 32px;     height: 29px;     cursor: pointer;       position: relative;        display: block;     float: left;     line-height: 29px; } 

you'll need adjust line height keep text in vertical centre.


or, if that's impractical, remove white space markup:

this:

<input id="appointment-yes" type="radio" name="set-appointment" value="yes" /> <label class="yes-label" for="appointment-yes"></label> <input id="appoinment-no" type="radio" name="set-appointment" value="no" /> <label class="no-label" for="appoinment-no"></label> 

becomes:

<input id="appointment-yes" type="radio" name="set-appointment" value="yes" /><label class="yes-label" for="appointment-yes"></label><input id="appoinment-no" type="radio" name="set-appointment" value="no" /><label class="no-label" for="appoinment-no"></label> 

demo


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -