深入理解vertical align和基線

2021-09-26 08:43:46 字數 1201 閱讀 4812

最近css寫的很多,經常會在div中放再配一些文字什麼的,發現塊元素內部有內聯元素時,塊元素的表現和內聯元素的位置有一些奇奇怪怪的現象,看了張鑫旭老師的這篇收穫很大。

現象一、div中放一張,下方出現空隙

為什麼下面會有空隙呢?現在我們在後面加幾個字再看看。

可以發現和文字是對齊的,他們有什麼關係嗎?我們再將文字變為inline-block,並加乙個背景色。

到這裡,我們大概明白了,下面的空隙和其後面的文字有關,但當我們不加文字的時候,的後面(或前面)放文字的這個節點依舊是存在的,張鑫旭老師將其稱為幽靈空白節點。現在我們就好理解了。

1.這張的預設對齊方式是?

2.後面文字的高度從何而來?

vertical-align預設值是baseline, 也就是基線對齊。而基線是什麼,基線就是字母x的下邊緣。所以,的下邊緣就和後面文字的下邊緣對齊(見下圖)。而字元本身是有高度的,於是,下面就留空了。而文字的高度是由行高決定的。

想要去掉這個空隙,該怎麼做呢?

1. 讓vertical-align失效

2. 使用其他vertical-align值

3. 直接修改line-height值

現象

二、兩個併排的設定為inline-block的元素,不對齊

同理,vertical-align預設這兩個元素是以基線對齊的,乙個inline-block元素,如果裡面沒有inline內聯元素,或者overflow不是visible,則該元素的基線就是其margin底邊緣,否則,其基線就是元素裡面最後一行內聯元素的基線。解決方法就是,在第乙個元素中加入空格。

深入理解C語言 深入理解指標

關於指標,其是c語言的重點,c語言學的好壞,其實就是指標學的好壞。其實指標並不複雜,學習指標,要正確的理解指標。指標也是一種變數,占有記憶體空間,用來儲存記憶體位址 指標就是告訴編譯器,開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時,號表示所宣告的變數為指...

mysql 索引深入理解 深入理解MySql的索引

為什麼索引能提高查詢速度 先從 mysql的基本儲存結構說起 mysql的基本儲存結構是頁 記錄都存在頁裡邊 各個資料頁可以組成乙個雙向鍊錶每個資料頁中的記錄又可以組成乙個單向鍊錶 每個資料頁都會為儲存在它裡邊兒的記錄生成乙個頁目錄,在通過主鍵查詢某條記錄的時候可以在頁目錄中使用二分法快速定位到對應...

深入理解C語言 深入理解指標

關於指標,其是c語言的重點,c語言學的好壞,其實就是指標學的好壞。其實指標並不複雜,學習指標,要正確的理解指標。指標也是一種變數,占有記憶體空間,用來儲存記憶體位址 指標就是告訴編譯器,開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時,號表示所宣告的變數為指...