CSS「vertical-align：top」用於移除內聯元素下方的底部空間 - 這是如何工作的？

我知道瀏覽器在內聯元素下面添加一些額外的空間。爲了容納像j，q，y這樣的字符的「尾巴」。CSS「vertical-align：top」用於移除內聯元素下方的底部空間 - 這是如何工作的？

一種可能性，以擺脫空間的是添加一個「垂直對齊：頂部」屬性的特殊元素：

figure img { 
    vertical-align: top; 
}

它的工作原理。我試過了。

但我不明白怎麼和爲什麼它工作。

我期望圖形容器保持它的大小，img放在圖形容器的頂部。

爲什麼摺疊容器？

有人可以解釋我在這裏用來消除不希望的底部空間的行爲嗎？

來源

2016-10-10 bew5

https://mor10.com/removing-white-space-image-elements-inline-elements-descenders/ –

此解釋可能有助於：[**圖片標記**下方的神祕空白處]（http： //stackoverflow.com/a/31445364/3597276）... –

和這個：[**爲什麼我的textarea比它的鄰居更高？**]（http://stackoverflow.com/q/32414736/3597276） –

'vertical-align'不影響被尋址元素的對齊。 'vertical-align'指定內聯元素應該如何在內聯元素周圍運行。我想用背景知識，你也可以解釋進一步的行爲。

對於我的英語知識，我很抱歉。：P

2016-10-10 09:36:53 hendrikheinle

回答