导航栏上的内联块

Question

滚动浏览之前堆栈溢出问题的不同答案后 - 我遇到了类似于此的导航条形码。 工作正常。

我理解通过在.ulTest上使用内联块，它实际上使导航栏水平。 但是我无法理解为什么它在.ulTest li上有内联阻塞。 我尝试添加/删除它，并从删除它导航栏高度变小。 任何人都可以向我解释这条线实际上在做什么以及它如何影响页面？ 谢谢 ：）

.ulTest
{
    text-align: center;
    list-style-type: none;
}
.ulTest li
{
    display: inline-block;
}
.ulTest li a
{
    text-decoration: none;
    padding: 15px 25px;
    display: inline-block;
    color:black;
}

Answer 1

因为锚元素只是内联，浏览器默认，其高度只是周围线框的高度。 通过使其成为块，您可以使该元素的高度与周围的父元素的大小相同，同时将它们全部保存在“内联”中。

所以，拿你的HTML和CSS并把它们放在一起。 使用您的开发人员工具，并将锚元素的大小视为内联块与内联块，您会发现其中的差异。 作为块级别，您可以使用内联方式调整高度和边距以及填充。