Ernestas Gruodis Ernestas Gruodis - 9 months ago 39
CSS Question

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

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):


enter image description here

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

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download