title: HTML/CSS: Styling a checkbox inside a form
body: <p>I have the following form:</p>
  
  <p><img src="https://i.stack.imgur.com/LDAgj.png" alt="enter image description here"></p>
  
  <p>Using this HTML:</p>
  
  <pre><code>&lt;form id="user_form" name="user_form"&gt;
      &lt;input id="firstname" type="text" name="firstname" placeholder="Vorname" required&gt;
      &lt;br&gt;
      &lt;input id="lastname" type="text" name="lastname" placeholder="Nachname" required&gt;
      &lt;br&gt;
      &lt;input id="nickname" type="text" name="nickname" placeholder="Nickname" required&gt;
      &lt;br&gt;
      &lt;input id="email" type="email" name="email" placeholder="Email" required&gt;
      &lt;br&gt;
      &lt;input id="conditions" type="checkbox" name="conditions" required&gt;Ich bin mit den &lt;a id="show_2"&gt;Teilnahmebedingungen&lt;/a&gt; einverstanden!
      &lt;br&gt;
      &lt;input id="user_save" type="submit" value="Speichern"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>#user_form input[type="text"], input[type="email"], input[type="submit"] {
      width: 80%;
      display: block;
      margin: 0 auto;
      height: 50px !important;
      font-size: 18px;
      line-height: normal;
      line-height: 32px\0/;
      /* for IE 8 */
  }
  
  #user_form input[type="checkbox"] {
      width: 80%;
      display: inline !important;
      margin: 0 !important;
      padding: 0 !important;
      height: 50px !important;
  }
  </code></pre>
  
  <p>What i dont understand is:</p>
  
  <ol>
  <li>Why isnt the checkbox aligned to the left. There should not be that padding to the left of the checkbox. i set margin and padding to 0.</li>
  <li>Why is there so much space between the checkbox and the text right of the textbos? The Text needs to be directly to the right of the checkbox with maybe 20px padding. I also need that text to be centered vertically</li>
  <li>Why is the text not linebreaking? the checkbox together with the text should have a width of 80% like all the other inputs.</li>
  </ol>
  
  <p>Hope you can help me.</p>