图片中红色部分间隙哪来的？怎么去除？

Question

代码如下：

 <div class="tipgroup">
                    <input readonly="" class="form-control layer-date" id="hello1">
                    <div class="btn "><i class="glyphicon glyphicon-time" onclick="laydate({elem: '#hello1'});"></i></div>
                    <div class="btn-group">
                        <button type="button" class="btn  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-chevron-down"></span>维度选择
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <div class="btn"><i class=""></i>比较</div>
                </div>

查看元素好像没有margin，连after和before也没找到

Answer 1

讲真，你只贴html代码不贴css代码，真的看不出来好么！
目测两个原因：
1）bootstrap里设置了默认样式，那么你需要找出来并将它覆盖
2）可能是设置了diplay:inline-block的原因，inline-block默认会产生一个间距，你可以设置font-size:0，或者改成浮动(float)布局，或者flex布局

Answer 2

那个应该是bootstrap里面的默认的margin间距，可以选中元素然后右击查看元素，看看哪里多了间距，用行内样式覆盖即可…

Answer 3

间隙是写html时的换行符，把外层元素的font-size设为0就没了。