html - 删除每个输入元素之前的空格 - 由换行符引起

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 wrapper 元素归零，然后在 wrapper 内将其重置。

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>