鍍金池/ 問答/HTML/ 父元素的基線是怎么確定的

父元素的基線是怎么確定的

vertical-align設(shè)置行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊方式。
1.一個(gè)div中有一個(gè)inline-block，默認(rèn)vertical-aglin：baseline
圖片描述

2.為什么設(shè)置粉色方框vertical-aglin：middle，父元素的基線怎么跑中間了？
粉色的中垂線和父元素baseline+1/2 x-height對齊，粉色的為什么不跑下去，而是讓父元素基線跑上來？
圖片描述

回答
編輯回答
淺時(shí)光

  1. 父元素的基線是字母x的底端。

  2. vertical-aglin：baseline是元素基線與父元素的基線對齊。vertical-aglin：middle是元素中垂線與父元素的基線加上小寫x一半的高度值對齊。所以不是父元素的基線變了，而是元素的對齊標(biāo)準(zhǔn)變了。

更新：
https://codepen.io/WhiteYin/p...
寫了個(gè)demo對比下兩種情況。
通過隱藏粉色div，你可以發(fā)現(xiàn)父元素basaline+1/2 x-height的位置一直是沒有變化的。
只不過粉紅div顯示后父元素高度會變高。

2018年5月11日 11:59