如何在输入标签中添加边距[重复]答案

【问题标题】：How to add margin within input tag [duplicate]如何在输入标签中添加边距[重复]
【发布时间】：2020-06-27 01:01:04
【问题描述】：

如何将边距放在<input type="text"> 标记中。这方面的一个例子是谷歌的搜索栏，在输入边框和用户在搜索栏中输入的文本之间留有空间。

以防万一你想看一些代码：

&lt;input type=text placeholder=searchHere style=text-align:left

【问题讨论】：

标签： html css

【解决方案1】：

正如答案here所说，

边距位于块元素的外部，而填充位于里面。

您应该设置 CSS 属性 padding 来创建此效果。

&lt;input type="text" placeholder="searchHere" style="text-align:left;padding-left:15px;"/&gt;

详细了解margin 和padding here 之间的区别。

【讨论】：

当时回不去，需要耽误一段时间。

【解决方案2】：

使用 CSS padding。

&lt;input type="text" placeholder="searchHere" style="text-align:left; padding:10px;"/&gt;

【讨论】：

【解决方案3】：

那不是margin 可以达到您想要的效果。是padding 是这样的

&lt;input type="text" placeholder="Search Here" style="padding: 10px" /&gt;

【讨论】：

【解决方案4】：

有一些效果，只是为了好玩

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;"

【讨论】：