什么导致内联块元素之间的空间？

Question

在this page上，当您将鼠标悬停在导航项上时，左侧会有一个间隙：

你能帮助我消除这个差距吗？

Answer 1

解决您的问题。尝试将所有li元素浮动到ul内，从而消除每个li之间的神奇边距。 （下面的截图是后效）

  

获得空格的原因是因为，元素之间有空格（换行符和几个标签计为空格，只是为了清楚）。

一般性地解决此问题

1. 删除空格
2. 使用负边距
3. 跳过结束标签（黑客）
4. 将font-size设置为0
5. 使用float
6. 使用flexbox

详细了解内联项目的神奇空间，

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

使用 display:block 代替 display:inline-block ，然后为内联元素添加 float:left

  

display:inline-block 在美容中编写代码时，在px中添加额外的空格   带空格和行的模式

类似的东西：

.genesis-nav-menu .menu-item {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0;
    text-align: left;
    float: left;
}