如何清除內嵌塊元素的底部邊距：隱藏？

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/