Html 使用CSS删除不必要的边距并调整高度

有两个问题我正试图解决，但找不到解决方案

第一个是li场之间的空间比2px要宽得多。如何删除它

另一个是a字段仅与文本一样高，尽管字段高度定义为50px

我还从GitHub启用了normalize.css文件

有什么建议吗

HTML

<nav class="nav-box">
    <div class="row">
        <ul class="main-nav">
            <li><a href="#">YES</a></li>
            <li><a href="#">NO</a></li>
        </ul>
    </div>
</nav>

关于间距问题，这里有一个。

这是

内联块

元素的问题（两个这样的元素之间会出现额外的间距）。解决此问题的一种方法是将父元素（在本例中为

）

font-size

设置为0，然后显式设置

元素的

font-size

。还有其他方法，比如负边距，但我发现

font-size:0

方法是最方便的。 您可以在这里阅读其他方法

高度问题

---

虽然您已将

内联块

属性指定给

元素，但子

元素仍然是内联的。诸如

height

和

width

之类的属性对内联元素没有影响。将

display:inline block

添加到

元素中，以获得所需效果

您可以使用负边距：

.main-nav li {

    margin: 0 -2px;

}
.main-nav li a {

    display: inline-block;

}

---

我加了一把小提琴，但我看不出第一个问题。您可以通过将链接本身设置为

display:block

，来解决第二个问题。编辑所有在我猛按F5大约10次后起作用的内容：DMargin大小各不相同，使用注释标记清除空白、在标记中对其进行内联/缩小或将字体大小设置为0都是更好的方法

.main-nav li {

    margin: 0 -2px;

}
.main-nav li a {

    display: inline-block;

}