删除每个输入元素前的空格 - 由新行字符引起

Question

如果我用这两种方式编写HTML代码，我注意到浏览器行为的差异 - 第一种是没有换行符：

<div class='sep'>&#9642;</div><input type='radio' id='uplToday' name='upldateRangeSel' value='1'><label for='uplToday'>Today</label>

第二个：

<div class='sep'>&#9642;</div>
<input type='radio' id='uplToday' name='upldateRangeSel' value='1'>
<label for='uplToday'>Today</label>

如果是第二个例子 - 我可以在输入元素之前看到添加了空白字符（在下面选择它 - 以蓝色显示）：

如何删除此空格？编写没有换行符的HTML代码不是一个好主意..

Answer 1

您在此处看到的空间是所有内联元素的特征 - 您可以通过多种方式解决 - 其中一些是：

1. 将包装元素的font-size设置为零，然后在包装中重置它。

2. 使用评论<!-- -->

见下面的演示：

.wrapper_1 > *, .wrapper_2 > * {
  display: inline-block;
}
.wrapper_1 {
  font-size: 0;
}

.wrapper_1 > * {
  font-size: initial;
}

Using font-size:
<div class="wrapper_1">
  <div class='sep'>&#9642;</div>
  <input type='radio' id='uplToday' name='upldateRangeSel' value='1'>
  <label for='uplToday'>Today</label>
</div>

Using comments:
<div class="wrapper_2">
  <div class='sep'>&#9642;</div><!--
  --><input type='radio' id='uplToday' name='upldateRangeSel' value='1'><!--
  --><label for='uplToday'>Today</label>
</div>

Answer 2

我已使用[{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier":{"id":40629,"calendarEntries":[{"id":40630,"associatedServiceChargeTier": 尝试以下代码段，这就是您所需要的，请参阅参考链接How to remove the space between inline-block elements?

display:inline-block

.sep {
  display: inline-block;
}