HTML/CSS - 不明原因的边距

Question

我有以下页面与一些HTML/CSS:http://jsfiddle.net/Hf6dB/1/

由于某种原因,屏幕顶部工具栏的按钮右边缘.左边,上边和下边的边距都可以,因为容器有一个填充,但边距在哪里？

也是在页面的真实版本中,你在小提琴上看不到,因为没有图标,我在每个菜单条目中都有类似的问题:

            <li>
                <div class="draggable">
                    <input id="tb-btn-search" title="Search" type="button">
                    <p>Search</p>
                </div>
            </li>

当鼠标离开按钮时,其<p>宽度可以使用CSS过渡从0变为2.由于某种原因,当宽度<p>为零时,图标不再居中,因为在这里,还有一个额外的边距来自任何地方.

这是否与内联块显示属性的使用有关？

谢谢你的帮助!

Answer 1

display: inline-block在元素之间创造差距.进一步阅读这里.

编辑:

bjb568在评论中提到了4px差距:

没有!4px间隙取决于字体和大小.您不能使用负边距来解决这个问题,因为您不知道差距有多大.-4px是一个神奇的数字,因此应该避免.请改用font-size:0