为什么我的<a> tag is inheriting &#39;display:block&#39; in one set of code, but not the other?

Question

I was fiddling around with creating some headers with a navigation. More specifically I was trying to create the nav links so that they would have padding so that the surrounding area would be clickable, and not just the text itself.

Usually in order to get this sort of behavior you need to apply padding to the a tag and use the display: block property:

li a {
    display: block;
    padding: 10px 15px;
}

In my codepen that I have here我可以在不应用display: block的情况下实现可点击的环境。但是，在我从互联网上找到的this here类似代码中，您必须拥有display: block才能使填充区域可以点击，甚至显示。

为什么我不需要在第一个codepen链接中插入display: block属性？它是从li继承该属性的吗？如果是这样，为什么第二组代码没有继承它呢？

Answer 1

该方法真正的神奇之处在于，如果没有给元素设置一个高度，当你将overflow设置为hidden时，它会占用内部元素的高度。

请删除ul样式

overflow:hidden;

为此

添加背景颜色

li a
{
background-color:#333;
}

Answer 2

您不一定已将display:block添加到a以获得所需效果。内联元素可以像块一样处理填充。

示例：

div{
  background:red;
  padding: 10px;
  margin-bottom:20px;  /* just for visual purpose */
}

span{
  background:lightblue;
  padding: 10px;
}

<div>Block</div>
<span>Inline</span>

您提供的两个Codepen示例之间的区别在于，在第二个示例中，ul通过强制执行overflow: hidden样式来隐藏链接的填充。

从overflow中删除ul样式将允许a标记（链接）可见地显示他们拥有的填充。