搜索、输入、按钮边距和填充答案

【问题标题】：Search, input, button margin and padding搜索、输入、按钮边距和填充
【发布时间】：2021-03-30 19:21:09
【问题描述】：

我想删除<input> 和<button> 之间的空格。

在 CSS 中，我尝试使用填充：input, button {padding : 0px}，但没有成功。

<form action="search">
  <div class="input-search">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" />
    <button type="submit">
      <strong>Search</strong>
    </button>
  </div>
</form>

【问题讨论】：

你在使用任何框架吗？ CSS重置？等等？
可能要删除 makup 中的空间？ :...Angeles" /><button...
你的意思是这样吗？ - ibb.co/s9QLFF6
Tkank 你，是的，我想要那样@sergeykuznetsov。
谢谢@LouysPatriceBessette 没关系，非常感谢，这很简单，但我是初中生，学生。谢谢

标签： html css forms css-transitions margin

【解决方案1】：

您可以添加input-search div 样式display:flex。

<form action="search">
  <div class="input-search" style="display:flex;">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
  </div>
</form>

【讨论】：

我试过了，但空间没有离开我会尝试添加第二个 flexbox 值
没关系，有会员帮助我，感谢您的帮助和抽出时间回复。

【解决方案2】：

margin-left: -1em; 可能吗？

保证金可以是负值...

button{
  margin-left: -1em;
}

<form action="search">
  <div class="input-search">
    <span class="input-icon">
      <i class="fas fa-map-marker-alt"></i>
    </span>

    <input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
  </div>
</form>

【讨论】：