奇怪的间距与按钮

Question

此CodePen中的按钮存在轻微的CSS问题。

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

我该如何解决这个问题？

Answer 1

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

对此有各种解决方案，其中大多数都列在this question中（我建议检查所有这些解决方案，而不仅仅是已接受的解决方案）。反过来，这些可以分为......

1）＆＃39;标记冲突＆＃39;，删除元素之间的空格。它可以这样做......

  <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）＆＃39;风格崩溃＆＃39; - 留下空白，但让它看不见。由于缺乏简单的解决方案，通常这涉及围绕这些内联元素创建一些容器，并将其font-size和line-height设置为0.

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

3）＆＃39;漂浮＆＃39; - 将所有内联元素转换为块，应用＆＃39; float＆＃39;他们的风格。这样，空白也会在视觉上消失。

Answer 2

我有更好的解决方案。

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

我刚试过上面的代码及其工作原理。