html - 部分填充和边框 overflow hidden : hidden;

Question

如果我们有以下HTML

<div id="i">
        <a href="#">StackOverflow</a>
</div>

使用以下 CSS

*
{
    margin: 0;
    padding: 0;
}

#i
{
    overflow: hidden;
}

#i a
{
    padding: 20px;
    background: red;
    border: black 1px solid;
}

当我修改 CSS 以打开/关闭 overflow: hidden 时，(如下图所示)我们可以看到顶部和底部的填充和边框overflow设置为hidden时是隐藏的，但允许左右padding和border流动。为什么会这样，我怎样才能允许完整的填充和边框流动。(我不想丢失任何内容，但需要overflow: hidden 作为对常见 *float: * problem 的修复)

这里实际上有 2 个问题，似乎当我们删除 overflow: hidden 时，我们仍然会在浏览器上限处丢失顶部填充，我也不知道为什么会这样。

Answer 1

我相信这是因为 <a>元素是一个 inline元素。如果你制作 <a>一个inline-block (即 display: inline-block )，然后应显示顶部填充。

不过，我不太清楚您所说的“我怎样才能让完整的填充和边框流动”是什么意思。