資訊專欄INFORMATION COLUMN
摘要：常見問題這一部分我們來說一說常見的內聯元素的一些問題。通過設置為，或者使用屬性，都可以達到去除內聯元素之間的間隙的目的。
上一篇文章我們討論了font-size，這一篇來說另一個與文字關系密切的屬性line-height。這里涉及到了內聯盒模型相關的東西，這里保持了與上一篇類似的結構，先來說說概念，然后是度量單位，最后來聊一個常見的內聯元素的現象。
內聯盒模型相關概念說到盒模型，只要了解css的基本都知道這個概念，但說到內聯盒模型可能很多人不是特別清楚。現在我們就來說說內聯盒模型幾個重要的概念。先看圖概覽一下，再逐項往下看。
Tip: 圖中用不同顏色的框標注了很多框，這些代表我們下面要說的不同的盒子或不同的概念。
inline-boxinline-box又名內聯盒子，通常由一些標簽包裹形成，最常用的如標簽包裹文字會形成內聯盒子，那些沒有標簽包裹的文字默認自己形成一個盒子稱為anonymous inline box匿名內聯盒子。
line-boxline-box名為行框，從名字就可以看出，它是由單行內聯元素形成的一個區域，注意是每一行都會形成，如果文字由五行，就會形成5個行框。行框的高度基本上是由行框中行高最大的內聯盒子決定的。我使用基本上這個詞，是因為還有其他情況，比如受到vertical-align屬性的影響。
containing-boxcontainer-box就是包含塊的意思，在內聯元素中，包含塊是由行框組成的。說白了就是包裹在所有行框外面的那層盒子。
struct這個詞可能很多同學見的比較少，張鑫旭大神稱之為”幽靈空白節點“，我們這里就用直譯過來的詞”支柱“。
在CSS規范中有這么一句話，Each line box starts with a zero-width inline box with the element"s font an d line-height properties. We call that imaginary box a ”struct"。翻譯過來意思就是每一個行框開始的位置都有一個寬度為0，并且行高和字體大小都與該元素相同的內聯盒子。這個假想的內聯盒子就被稱為“支柱”。簡單來說就是可以想象成行框前面有一個寬為0的空字符。
可能有的人會問，這個東西有什么用那？(⊙v⊙)嗯，用處大了去了，由于其幾乎無處不在的特性并且由于寬度為0，我們平時在內聯元素中遇到的很多奇怪的問題都是由“struct”引起的。我們暫時先放下這個，文章的最后我們再看這個東西引發的問題。
度量單位這一部分說說行高的單位，我們不再列出所有的單位，因為這些完全可以從官方文檔上看到，我們這里只說說重要的或者說容易錯的部分。
默認值line-height的默認值是什么，查下手冊我們就能很容易的看到，它的值是normal，那么normal是多大？從我的理解來說，它的值受到font-family和瀏覽器的影響，IE/Firfox與chorme表現存在部分不一樣的地方。但可以知道的是normal的初始值與字體的content-area的區域高度相同。不了解content-area的同學可以去看我的上一篇文章的line-height部分。這里簡單說一下，inline水平的元素設置背景后，背景部分就是內容區域的部分，與初始line-height同高。
百分比、em和數值的區別百分比和em與數值的區別在于繼承性質上的不同，百分比和em被繼承的是計算后的值，而數值類型的繼承的是一種“計算規則”。
常見問題這一部分我們來說一說常見的內聯元素的一些問題。
display: inline-block元素間的空隙這個問題，大家都遇到過，大家可以看看我做的實例的第一部分。首先我們會看到元素和元素之間的一定的間隙。這個間隙會引發的問題有，如果我們設置兩個display: inline-block的元素寬度為width: 50%都向右或向左浮動，但是確無法排在一行的情況。這就是由于多出了這一點間隙，導致容器寬度不足，最后容器一行無法放不下兩個寬度都為容器一半寬度的元素。
有人可能覺得這些元素間的間隙比較奇怪，但這是一種正常現象，因為內聯元素本來的排版就應該有間隙，你能夠想象文字和文字之間沒有間隙的情況嗎？內聯元素之間本來就應該獨立分開。怎么解決這個問題，網上也有很多答案，這里只簡單提一下，因為我們主要說的是原理嘛。通過設置font-size為0，或者使用letter-spacing屬性，都可以達到去除內聯元素之間的間隙的目的。
在我實例第一部分中應該很多人也注意到，在父容器的最底端也有一個空隙，這個到底是什么那？還記得我上面概念中提到的struct嗎，這種現象就是由這個東西引起的，由于其不可見，所有我們用一個內聯元素x來代替。這里可以看實例的第二部分。這個現象的原因是由于內聯元素是默認vertical-align元素對齊的，而我們的內聯元素的基線是默認為元素的底邊緣，sturct元素又有自己的行高，當它的基線與我們的內聯元素對齊時，它的行高會撐起一部分距離，就出現了實例中的現象。
知道了原因，我們解決起來也很簡單。只要struct元素的行號為0就可以了，所有我們可以設置父元素的line-height: 0或者通過設置font-size: 0來間接設置line-height為0。可能已經有人法相，font-size: 0可以同時解決元素間的間隙和底部的間隙，所以我更喜歡用這個方法。
下面我們做一下其他的操作，我們在實例第三部分中，前面三個inline-block元素中加上文字，發現元素都往下移動了，這又是什么原理那。這其中就涉及到了vertical-align屬性的一些性質，我們下一篇就來講講vertical-align，并且來說說這種現象的原因。
文章中如有錯誤的地方，或者您有更好的建議歡迎指正~，原文鏈接。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113105.html
摘要：內聯盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內聯盒子安放在包含盒子內，排除其他外界干擾。這時候由內聯盒子模型可知，行間距是等分的，中間部分是，達到看似居中的效果。可以得到結論和設置一致，并非是完全垂直，除非為。 張鑫旭的CSS深入理解之line-height學習筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...
摘要：常見問題這一部分我們來說一說常見的內聯元素的一些問題。通過設置為，或者使用屬性，都可以達到去除內聯元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個與文字關系密切的屬性line-height。這里涉及到了內...
摘要：但實質上，只要是內聯元素，這兩個元素都會同時在起作用。而解決方案可以有以下幾種元素不使用基線對齊，可以改為對齊元素塊狀化設置為設置為總結講解了的各類屬性值及其效果起作用的前提是內聯元素與都是同時作用在內聯元素上的 前言 vertical-align用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。也就是說，對于塊級元素，vertical-align...
摘要：的應用大部分時候，我們設置，都是為了垂直居中對齊。然后我們給設置，這樣我們就可以重置設置的，又因為保持了內聯特性，因此我們可以設置以及產生，從而實現近似垂直居中對齊。 前言 行高，顧名思義是一行文字的高度，而從規范上來說則是兩行文字基線之間的距離。行高是作用在每一個行框盒子(line-box)上的，而行框盒子則是由內聯盒子組成，因此，行高與內聯元素可以說是非常緊密，行高直接決定了內聯元...
閱讀 2825·2023-04-25 20:06
閱讀 1446·2021-08-26 14:15
閱讀 2233·2021-08-12 13:27
閱讀 1772·2019-08-30 15:55
閱讀 3469·2019-08-30 13:20
閱讀 2825·2019-08-29 15:12
閱讀 3330·2019-08-29 15:06
閱讀 2858·2019-08-29 14:13
