title: How to create an offset for the text displayed in an input?
body: <p>I am creating a basic log in function, really nothing fancy.
  <a href="https://i.stack.imgur.com/GRPqq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GRPqq.png" alt="enter image description here"></a></p>
  
  <p>this is what I have right now, but this is what I would like to have: </p>
  
  <p><a href="https://i.stack.imgur.com/N5SUE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N5SUE.png" alt="enter image description here"></a></p>
  
  <p>I don't just want to add spaces, since, when the user clicks the input field it clears the input. But I don't just want to clear it to another space as the user would be able to delete that then. I want a premade property to have that little one space-offset on the left, preferably ignored if I evaluate the input later on.
  Thanks in advance.</p>