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会在元素之间产生差距。 Further reading here

编辑：

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

NO！ 4px间隙取决于字体和大小。你不能使用负边距来解决这个问题，因为你不知道差距有多大。 -4px是一个神奇的数字，因此应该避免。使用font-size：0，而不是

Answer 2

您可以删除inline-block中的<ul>并将float: left;添加到li

#toolbar ul,
#toolbar li
{
    display: inline-block;         /* delete this
}

#toolbar ul,
#toolbar .tb-separator,
#toolbar li
{
     float:left;
}

更新了JsFiddle

Answer 3

元素之间的换行符被视为空格，因为元素是inline-block，因此它们是一行文本的一部分。您可以通过删除元素之间的空格和换行符来解决此问题。如果要在文档中保留缩进，可以选择在元素内添加换行符：

<outer
  ><inner
></outer>

HTML / CSS - 不明原因的边距

3 个答案: