css - css：如何减少输入元素之间的空格

Question

我有这个

<div>
      <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear" />
      <input  class="minimize" value="_" type="button">
      <input class="close"  value="x" username="_id_" type="button">
</div>

我在每个输入之间有 5 个像素的空间，我想将其设置为 1px。

我尝试使用边距和填充但没有成功：有什么线索吗？

重读

Answer 1

It's because of the white-space, either you can just take out all the white space between the tags, or simply use font-size: 0; on the parent element.

Demo (Removing white space between the elements)

Demo (Using font-size: 0; on the parent/wrapper element)

---

Note: You can also use margin-left: -4px; but I wouldn't recommend to use this as if the parent element has a font-size set to 200%, it will again create a white space - Demo

Answer 2

这是由于 HTML 代码中的空格造成的。有许多 CSS 技巧，但在显示的页面中删除空格的唯一特定方法是......从 HTML 中删除它。

带有 HTML 评论（并在 2 个月后为您自己或同事或客户评论为什么会有评论：“没有空格”）

<div>
      <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear" /><!-- no whitespace
      --><input  class="minimize" value="_" type="button"><!-- no whitespace
      --><input class="close"  value="x" username="_id_" type="button">
</div>

使用列表项，您还可以将结束标记放在下一行，但这对输入没有用:)

<ul>
      <li>aaa
      </li><li>bbb
      </li><li>ccc
      </li><li>lorem ipsum
      </li><li>dolor sit amet</li>
</ul>

我相信您也可以在下一行关闭元素：

<div>
      <input id="clearBtn__id_" username="_id_" type="button" name="clear_btn" class="clear_btn" value="Clear"
      ><input  class="minimize" value="_" type="button"
      ><input class="close"  value="x" username="_id_" type="button">
</div>

我已经习惯了完美的缩进，所以我只使用第一种方法......

Answer 3

空白是由每个元素之间的换行符引起的：

<div>
    <input /> <!-- White Space -->
    <input /> <!-- White Space -->
    <input />
</div>

要解决这个问题，有很多选择。仅使用 HTML，您可以简单地将所有input元素移动到一行：

<div>
    <input /><input /><input />
</div>

另一种选择是使用一些 CSS 从容器中删除字体大小：

div {
    font-size:0; /* The white space has no size, therefore isn't visible. */
}

input {
    font-size:16px; /* We restore the font size here. */
}

Answer 4

边距和填充将不起作用，因为输入是内联元素。您必须将 input 设为 inline-block 或 block 元素才能使用填充和边距。