Moving the text within a text input

Question

I've made a form, but where I've added a 0px margin to it, it has also applied that margin to text inside the input (e.g. where you would put your name, for a username input) meaning that it's against the left hand edge of the box.

How can I added a margin to the text within the box, while keeping the margin on the box itself?

Thanks in advance.

Nympho

Answer 1

You're looking for padding not margin.

Margin is outside of the element and padding is on the inside

Orvieto

Great, should've of thought of that really. Thanks for the reply. – Nympho

this answer https://mcmap.net/q/1245096/-moving-the-text-within-a-text-input is more usefull, in case you are using visible borders – Yiddish

Answer 2

I dont think the people here understand your question completely. The OP is asking how he can apply a margin to the text inside the input form while also still having a margin on the input itself.

His question is stated a little wrong. What he's looking for is how to INDENT the text inside the input. Use:

text-indent: 10px; // or whatever size you need

EDIT: I do realize this is a 7 year old response, but there really aren't any other proper answers to this via google search.

Orna

Answer 3

Set padding to the text box. Like:

input.text{padding:5px;} This means padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;

Also, I'm assuming the class name of your text input is text

Intermission

Answer 4

You can position text inside input field of type text using the text-indent property as follow:

text-indent : value;

In value you specify the value by which you want your text to be positioned that much to left.

Steppe