Html 内联元素之间的额外空间

我有这个html：

<div class="form-group"><!--
    --><div class="input-group" id="fileGroup">
    <input type="text" class="form-control" readonly placeholder="<?php    echo SF ?> *" id="selectedPiture" required data-validation-required-message="<?php echo FOTO ?>">
    <p class="help-block text-danger"></p>
   <span id="filePicture" class="input-group-btn">
       <button id="foto" class="btn btn-default" onclick="$('#fileToUpload').click();" type="button">&#xf1c5</button>
      <script>
        ...
      </script>
</span>
</div>

固定的。问题在于按钮css，更准确地说是填充。我刚刚删除了这条说明，增加了可怕字体的字体大小。
请提供一个带有您所用样式的JSFIDLE。在帖子中提供相关CSS比只提供JSFIDLE更可取。我的猜测是，这与您应用的一些自定义CSS有关，因为您的应用程序没有创建上面所示的空间。