奇怪的按钮间距答案

【问题标题】：Weird spacing with buttons奇怪的按钮间距
【发布时间】：2013-09-05 01:27:27
【问题描述】：

CodePen 中的按钮有轻微的 CSS 问题。

第一个似乎是间隔我的按钮，我不知道为什么。但是，如果您单击 + 按钮添加更多表格，那么奇怪的间距就消失了，它遵循我的输入类型按钮边距样式。

我该如何解决这个问题？

【问题讨论】：

标签： css

【解决方案1】：

因为空白很重要，基本上，当您处理内联元素时。源码中的<input>s 用空格隔开；注入的（由 JS 注入）不是。

对此有多种解决方案，其中大部分都列在this question 中（我建议将它们全部检查，而不仅仅是接受的一个）。反过来，这些可以分为...

1) '标签冲突'，删除元素之间的空格。可以这样实现...

  <input type="button" class="some_class"
/><input type="button" class="some_class"
/><input type="button" class="some_class" />

...或者像这样...

   <input type="button" class="some_class" /><!-- 
--><input type="button" class="some_class" /><!--
--><input type="button" class="some_class" />

2) 'style collapse' - 保留空白，但使其不可见。在没有简单解决方案的情况下，通常这涉及在这些内联元素周围创建一些容器，并将其 font-size 和 line-height 设置为 0。

这种方法的缺点是您必须为该容器内的元素恢复这些属性。

3) 'floating' - 将所有的内联元素变成块，对它们应用 'float' 样式。这样，空白也会在视觉上消失。

【讨论】：

嗯，好的。有没有办法通过代码来缓解这种情况？我喜欢这种 HTML 的视觉呈现方式 :(
嗯，this thread 有很多不同的解决方案（大约是<img>，但实际上是同一个问题）。如果我不能使用浮点数，我通常更喜欢tag clash 解决方案（当结束标记向右移动到开始标记的开头时）。
谢谢。我最终使用了评论解决方案。

【解决方案2】：

我有更好的解决方案。

只需将“font-size:0”添加到父标记“”，然后将“font-size:13px”添加到输入按钮（到类“.togPTbutton”）。

我刚刚对您的代码及其工作进行了上述尝试。

【讨论】：