Remove white space before each input element - caused by new line characters

Question

I've noticed the difference in browser behavior if I write HTML code in these two ways - the first is without line breaking:

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

And the second:

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

In case of the second example - I can see white space character added before input element (it is selected below - showing in blue color):

How can I remove this white space? Write HTML code without line breaking is not a good idea..

Answer 1

The space that you see here is a characteristic of all inline elements - you can solve it in many ways - some of them are:

1. Setting font-size of wrapper element to zero and then resetting it inside the wrapper.

2. Using comments <!-- -->

See demo below:

.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

I have used display:inline-block try the below snippet , this is what you need , check with the refference link How to remove the space between inline-block elements?

.sep {
  display: inline-block;
}

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