How to add margin within input tag

Question

How can margin be put within an <input type="text"> tag. An Example of this is Google's search bar, where there is room between the input border and the text that the user is typing into the bar.

Just in case you wanted to see some code:

<input type=text placeholder=searchHere style=text-align:left

score 0 · Answer 1 · answered Mar 15 '20 at 20:05

0

Use CSS padding.

<input type="text" placeholder="searchHere" style="text-align:left; padding:10px;"/>

answered Mar 15 '20 at 20:05

DenverCoder1

1,360
5
18

score 0 · Answer 2 · answered Mar 15 '20 at 20:05

0

that's not margin that does the effect you want. it's padding so something like this

<input type="text" placeholder="Search Here" style="padding: 10px" />

answered Mar 15 '20 at 20:05

TedMeftah

1,640
1
20
28

score 0 · Accepted Answer · answered Mar 15 '20 at 20:05

0

As said in the answer here,

Margin is on the outside of block elements while padding is on the inside.

You should set the CSS property padding for creating this effect.

<input type="text" placeholder="searchHere" style="text-align:left;padding-left:15px;"/>

Read more about the differences between margin and padding here.

answered Mar 15 '20 at 20:05

Lal

14,505
4
39
63

I wasn't able to back then, it required me to delay for some time. – Red Mar 15 '20 at 22:22

score 0 · Answer 4 · answered Mar 15 '20 at 20:21

0

With some effect, just for fun

input style="padding: 4px 10px;
  border: 1px solid #999;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;"

answered Mar 15 '20 at 20:21

bron

1,113
1
6
14

How to add margin within input tag

4 Answers4