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。

我尝试使用保证金和填充而没有成功：任何线索？

reagrdfs

Answer 1

这是因为白色空间，你可以只取出标签之间的所有空白区域，或者只是在父元素上使用font-size: 0;。

Demo（删除元素之间的空白区域）

Demo（在父/包装元素上使用font-size: 0;）

注意：您也可以使用margin-left: -4px;，但我不建议使用此功能，就好像父元素的font-size设置为200%一样，它会再次创建一个空格 - Demo

Answer 2

这是由于HTML代码中的空格。有许多CSS技巧，但在显示的页面中删除空格的唯一 CERTAIN 方法是...将其从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>

要解决此问题，请quite a lot of options。仅使用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

边距和填充不起作用，因为输入是内联元素。您必须输入内联块或块元素以使用填充和边距。

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

4 个答案: