困然許久的vertical-aligin，間隙的出現并不是bug,!!!!

antz 發布于2019-08-02 15:56 / 2936人閱讀

摘要：最近學習一個出現一個奇怪的現象，話不多說先貼代碼。當初認為由于設置成了之后，換行和空格都被解析造成的，然是后來已測試，發現根本不是這個原因造成的，最近經過自己的苦思冥想，查閱資料，竟然發現是搞得鬼。因為浮動不屬于行內元素了。

最近學習一個html,出現一個奇怪的現象，話不多說先貼代碼。

`


    
    Document




    
    
    


    
    

    


`


----------

這是代碼。。。

當初認為由于設置成了line-blcok之后，換行和空格都被解析造成的，然是后來已測試，發現根本不是這個原因造成的，最近經過自己的苦思冥想，查閱資料，竟然發現是vertical-align搞得鬼。

現在我來解釋下原因，不過要明白的話，需要了解行高，基線等概念
我先在舉幾個例子




    
    Document




    
    
    


    x我

效果：

可能大家沒注意到：這個現象已經說明了原因，現在我來分下下：
**

1. 了解x;我們知道x的底部是基線，但是根據分析，基線下面應該有底線，底線下面有一半的行高，


2.我們可以看到x是和div垂直平齊的，這個也是google瀏覽器默認的文本以基線居中，但是基線下面還有到底線的距離和半個行高。因此為了容下字體，下面的div需要向下移動  基線到底線的距離+一半的行高
3.在google瀏覽器中，默認字體大小16px,ling-height是18px，我測量他們的縫隙是3px,就可以知道他們一半的行高是1px,基線到底線的距離是2px,
總結：這個就是出現縫隙的原因所在了。

**
解決辦法：

1.浮動。因為浮動不屬于行內元素了。
2.改變vertical-align的對齊方式，適應top,和bottom可以消除縫隙，
注意：是用text_top 和text_bottom任然會出現縫隙但是比之前小一點，因為他們是跟字體對齊，換句話說，他們沒有基線到底線的距離，只有一半行高的距離，所以縫隙會變小。

GPU云服務器云服務器 bug的生命周期管理bug的軟件 php常見的bug java的bug集

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54379.html

困然許久的vertical-aligin，間隙的出現并不是bug,!!!!

摘要：最近學習一個出現一個奇怪的現象，話不多說先貼代碼。當初認為由于設置成了之后，換行和空格都被解析造成的，然是后來已測試，發現根本不是這個原因造成的，最近經過自己的苦思冥想，查閱資料，竟然發現是搞得鬼。因為浮動不屬于行內元素了。最近學習一個html,出現一個奇怪的現象，話不多說先貼代碼。 ` Document *{ margin:0; padd...

lsxiao 2019-08-30 13:11 評論0 收藏0
為什么開發人員必須要了解數據庫鎖？

摘要：小明馬上開發完畢，成功上線。下班過后，小明回想大紅說的話，什么是間隙鎖，什么是插入意向鎖，看來作為開發者對數據庫不應該只會寫啊，不然遇到一些疑難雜癥完全沒法解決啊。破壞了數據庫中的隔離性。 1.鎖？ 1.1何為鎖鎖在現實中的意義為:封閉的器物，以鑰匙或暗碼開啟。在計算機中的鎖一般用來管理對共享資源的并發訪問，比如我們java同學熟悉的Lock,synchronized等都是我們常見的...

AbnerMing 2019-08-16 15:44 評論0 收藏0
9：瀏覽器兼容

摘要：由和開發的瀏覽器排版引擎，年月發布。瀏覽器的兼容問題是我們必須去克服的。表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。? 9：瀏覽器兼容常見的主流瀏覽器 1）主流瀏覽器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的瀏覽器 : Mosaic ...

AWang 2019-04-23 13:33 評論0 收藏0
MySQL - 事務的啟動 / 設置 / 鎖 / 解鎖——入門

摘要：行級鎖，頁級鎖，表級鎖。聞其名知其意，比較少見的是頁級鎖，它鎖定的是一組相鄰數據。排他鎖允許獲得排他鎖的事務更新數據，阻止其他事務取得相同數據集的讀寫。意向排他鎖事務打算給數據行加行排他鎖，事務在給一個數據行加排他鎖前必須先取得該表的鎖。廢話本篇的名字簡直可以起成《事務操作：從入門到放棄》。力圖解決：在MySQL 5.5 版本及更高版本時，使用事務的完整流程和細節記錄，而無需面對...

iOS122 2019-06-27 16:59 評論0 收藏0