title: Radio Button and Checkbox labels positioning
body: <p>I have a form in which the radio buttons and checkboxes look like this:
  <img src="https://i.stack.imgur.com/B2LYG.png" alt="enter image description here"></p>
  
  <p>I would like to know if I can get rid of the distance between the buttons and their labels in some way. I also like to to move the buttons to the leftmost side of the form. Almost under the question number.</p>
  
  <p>This is currently the CSS to my radio buttons:</p>
  
  <pre><code>.radio{
  direction: ltr;
    padding: 0 5px 0 0px;
    display: block;
    clear: left;
    float: left;
  }
  </code></pre>
  
  <p>Also my whole form works under a  called stylized with a css as the following if it helps:</p>
  
  <pre><code>/* ----------- stylized ----------- */
  #stylized{
      border:solid 2px #b7ddf2;
      background:#ebf4fb;
  }
  #stylized h1 {
      font-size:14px;
      font-weight:bold;
      margin-bottom:8px;
  }
  
  #stylized p{
      font-size:11px;
      color:#666666;
      margin-bottom:20px;
      border-bottom:solid 1px #b7ddf2;
      padding-bottom:10px;
  }
  #stylized label{
      display:block;   
      text-align:right;
      width:140px;
      float:left;
  }
  #stylized link {
      font-family: verdana,arial,sans-serif;
      font-size:11px;
      color:#333333;
      text-decoration:none;
      color: #FFA500;
  }
  #stylized .small{
      color:#666666;
      display:block;
      font-size:11px;
      font-weight:normal;
      text-align:right;
      width:140px;
  }
  #stylized input{
      float:left;
      font-size:12px;
      padding:4px 2px;
      border:solid 1px #aacfe4;
      width:200px;
      margin:2px 0 20px 10px;
      background-color: #EEE8AA
  }
  #stylized input:active { background: #FF7F00 !important; color: black; }
  #stylized input:focus { background: yellow; color: black; }
  
  #stylized select{
      float:left;
      font-size:12px;
      padding:4px 2px;
      border:solid 1px #aacfe4;
      width:205px;
      margin:2px 0 20px 10px;
      background-color:#C1FFC1;
      direction: ltr
  }
  
  
  #date select{
      float:left;
      font-size:10px;
      padding:4px 2px;
      border:solid 1px #aacfe4;
      width:60px;
      margin:2px 0 20px 10px;
      background-color:#FFDAB9
  }
  
  
  #stylized textArea{
      float:left;
      font-size:10px;
      font-family: verdana,arial,sans-serif;
      padding:4px 2px;
      border:solid 1px #aacfe4;
      width:330px;
      height:100px;
      margin:2px 0 20px 10px;
      background-color: #EEDD82
  }
  #stylized textarea:active { background: #FF7F00 !important; color: black; }
  #stylized textArea:focus { background: yellow; color: black; }
  </code></pre>