如何清除内嵌块元素的底部边距：隐藏？

Question

我知道，当inline-block元素具有其计算值不同于visible的overflow属性时，其基线是底部边缘边缘。

单击切换按钮将overflow:hidden添加到div元素中，在此fiddle的实践中见此实践。 div的基线将与其底部边缘对齐，从而在其下方生成一些空白/边界。

此行为在answer中有很好的解释。

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

逻辑修复我能想到的是改变div的vertical-align（默认为baseline）到别的东西。但我无法决定哪vertical-align是最合适的：

• top在Chrome 33似乎目前窃听，元素的所有直接子（文本节点和inline-block/replaced内容）的顶端对齐边缘的div。

• bottom会是另一种选择，但div再向上轻微移动/向下，而其动画height /垂直padding使用jQuery。

• middle似乎工作正常，据我测试，但我不知道如何计算结果对齐浏览器然后。

我还发现了其他黑客，如父申请line-height:0或font-size:1px并在其中重置其line-height/font-size容器包装所有的孩子，但这些都是非常丑陋的黑客。

对于vertical-align，这个用例的适当值是什么？

更新：middle明显地将内联块元素与行盒中间对齐。从我的测试结果来看，似乎只要元素的底部边缘高于基线，就不会产生闪烁问题，动画效果为height。为了证明闪烁问题与text-alignbottom/text-bottom发生（注意顶部边框和文字）：demo

所以middle或text-top（为了安全起见）一vertical-align似乎做工精细（避免top由于Chrome浏览器BUG）。我仍然乐于见解。

---

语境：我使用jQuery动画的inline-block元素。jQuery的动画（fadeIn/fadeOut/slideUp/slideDown/animate /等）中的元素设置overflow:hidden而动画，使具有一个动画inline-block元件下方的整个页面的不舒服的副作用要略微向下推动用于动画的持续时间。

下面是另一个demo说明上面的段落。在SSCCEs使用

---

代码：

Demo #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; 
} 

Demo #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); 
}); 

（相同的CSS作为演示＃1）

Demo #3闪烁而动画height由于vertical-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; 
} 

Answer 1

你可以取消各地的阴性切缘扩展基线“额外”的高度，但这将依赖于父母的line-height。这是默认情况下的1.2左右，但如果您设置了特定的值，则处理起来会更容易。

下面是增加了一个负余量而动画的例子：

JS

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

CSS

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

假设默认字体大小16像素，行高大约是19.2px，所以我们需要删除3.2px（em，3.2 * 100/16 = 0.2）。当然，设置实际的线条高度值会使这更容易。

http://jsfiddle.net/n6hmr/9/