title: Moving text in input
body: <p>I'm having trouble to move text inside input. If i add margins or paddings it moves or scales the input. I want to move "Username" 10px away from left side.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.log_inp input[type="username"] {
    top: 80px;
    height: 28px;
    width: 234px;
    border: solid 1px #e4e4e4;
    font-family: OpenSans-Italic;
    color: #9a9a9a;
    font-size: 13px;
  }
  input {
    padding: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="log_inp"&gt;
    &lt;form action="#"&gt;
      &lt;input type="username" name="Username" placeholder="Vārds..."&gt;
      &lt;br&gt;
      &lt;input type="password" name="Password" placeholder="Parole..."&gt;
      &lt;br&gt;
      &lt;input type="submit" value="Ienākt"&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/EHkqg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EHkqg.png" alt="enter image description here"></a></p>