部分填充和边框隐藏溢出：隐藏;

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 作为对公共*float: * problem的修复）

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

Answer 1

我相信这种情况正在发生，因为<a>元素是inline元素。如果您将<a>设为inline-block（即display: inline-block），则应显示顶部填充。

我不太清楚你的意思＆＃34;我怎么能让完整的填充和边框流动＆＃34;但是。