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

Posted 2023-03-06

【中文标题】如何在输入标签中添加边距[重复]

【英文标题】：How to add margin within input tag [duplicate]

【发布时间】：2020-06-27 01:01:04

【问题描述】：

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

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

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

【参考方案1】：

正如答案here所说，

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

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

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

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

【讨论】：

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

【参考方案2】：

使用 CSS padding。

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

【参考方案3】：

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

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

【参考方案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;"