如何使用 overflow：hidden 清除内联块元素的底边距？

问：

我知道当一个元素的计算值与 不同时，它的基线是下边距边缘。inline-blockoverflowvisible

通过单击切换按钮添加到元素，在此小提琴中实际查看这一点。的基线将与其下边缘对齐，在其下方生成一些空白/边距。overflow:hiddendivdiv

此答案中很好地解释了此行为。

我的问题是，我如何“修复”它，以便在元素收到 overflow：hidden 时不会出现边距？

我能想到的合乎逻辑的解决方法是将 的（默认为 ）更改为其他内容。但我很难决定哪个是最合适的：divvertical-alignbaselinevertical-align

• top似乎目前在 Chrome 33 中存在错误，元素的所有直接子元素（文本节点和 / 内容）都与 .inline-blockreplaceddiv

• bottom将是另一种选择，但是在使用 jQuery 动画其 /vertical 时，then 会略微向上/向下移动。divheightpadding

• middle就我测试过的情况而言，似乎工作正常，但我不确定浏览器如何计算结果对齐。

我还发现了其他黑客，例如在父级中应用 or 并将所有子项包装在一个重置其 / 的容器中，但这些都是非常丑陋的黑客。line-height:0font-size:1pxline-heightfont-size

垂直对齐的正确值是多少，或者此用例的正确修复是什么？

更新：显然会将内联块元素与行框的中间对齐。到目前为止，从我的测试来看，似乎只要元素的底部边缘高于基线，就没有闪烁的动画问题。要演示 / 发生的闪烁问题（注意顶部边框和文本）：演示middleheighttext-alignbottomtext-bottom

因此，或（为了安全起见）似乎工作正常（避免由于Chrome错误）。我仍然对见解持开放态度。vertical-alignmiddletext-toptop

---

上下文：我正在使用 jQuery 对元素进行动画处理。jQuery的动画（/////等）在动画制作时设置在元素中，导致在动画期间将动画元素下方的整个页面稍微向下推，从而产生不舒服的副作用。inline-blockfadeInfadeOutslideUpslideDownanimateoverflow:hiddeninline-block

这是另一个演示，说明了上面的段落。

---

SSCCE中使用的代码：

演示 #1：

<div>
    some text and an inline block element <span></span>
</div>
<br>
<button>
    toggle overflow hidden
</button>

$('button').click(function() {
    var st = $('div')[0].style;
    st.overflow = !st.overflow ? 'hidden' : '';
});

span {
    display: inline-block;
    width: 10px;
    height: 50px;
    background: red;
}
div {
    display: inline-block;
}

演示 #2：

<div>
    some text and an inline block element <span></span>
</div>
<br>
<button>
    Animate for 1 second
</button>

$('button').click(function() {
    $('div').animate({ width: 300 }, 1000);
});

（与演示 #1 相同的 CSS）

演示 #3 动画时闪烁，原因如下：heightvertical-align: bottom

baseline
<div>
    some text and an inline block element <span></span>
</div>
<br>
<button>
    Animate for 2 seconds
</button>

var i = 0;
$('button').click(function() {
    $('div').animate({ height: ++i % 2 ? 300 : 100 }, 2000);
});

span {
    display: inline-block;
    width: 10px;
    height: 50px;
    background: red;
}
div {
    display: inline-block;
    border: solid;
    vertical-align: bottom;
}

$('div').
    addClass("animating").
    animate({ height: ++i % 2 ? 300 : 100 }, 2000).
    queue(function() {
        $(this).removeClass("animating").dequeue();
    });

.animating {
    margin-bottom: -.2em;
}