行內元素視覺格式化

目錄

前面的話

　　行內元素沒有塊級元素那麼簡單和直接，塊級元素只是生成框，通常不允許其他內容與這些框並存。而控制行內元素視覺格式化的主要是font-size、line-height、vertical-align

基本術語

　　在瞭解行內元素視覺格式化之前要先瞭解一些涉及到的基本術語

匿名文本

　　匿名文本(anonymous text)是指所有未包含在行內元素中的字元串

em框

　　em框在字體中定義，也稱為字元框(character box)。實際的字形可能比其em框更高或更矮。在CSS中，font-size的值確定了各個em框的高度

內容區

　　在非替換元素中，內容區可能在兩種。內容區可以是元素中各字元的em框串在一起構成的框，也可以是由元素中字元字形描述的框；而在替換元素中，內容區就是元素的固有高度再加上可能有的外邊距、邊框或內邊距。內容區類似於一個塊級元素的內容框

行間距

　　行間距(leading)是font-size和line-height之差。這個差實際上要分為兩半，分別應用到內容區的頂部和底部

　　[註意]行間距只應用於非替換元素

行內框

　　行內框通過向內容區增加行間距來描述。對於非替換元素，元素行內框的高度等於line-height的高度；對於替換元素，元素行內框的高度則恰好等於內容區的高度

行框

　　這是包含該行中出現的行內框的最高點和最低點的最小框。換句話說，行框的上邊界要位於最高行內框的上邊界；而行框的底邊要放在最低行內框的下邊界

構造行框

　　1、替換元素：得到各元素的height、margin-top、margin-bottom、padding-top、padding-bottom、border-top-width、border-bottom-width值，把它們加在一起；非替換元素：得到各行內非替換元素及不屬於後代行內元素的所有文本的font-size值和line-height值，再將line-height減去font-size，得到行的行間距，這個行間距除以2，將其一半分別應用到em框的頂部和底部

　　2、對於各內容區，確定它在整行基線的上方和下方分別超出多少。替換元素：將其底邊放在整行的基線上；非替換元素：確定各元素及匿名文本各部分的基線的位置，並知道該行本身基線的位置，然後將其對齊

　　3、對於指定了vertical-align值的元素，確定其垂直偏移量。由此可知，該元素的行內框要向上或向下移動多遠，並改變元素在基線上方或下方超出的距離

　　4、既然已經知道了所有行內框會放在哪裡，再來計算最後的行框高度。為此，只需將基線與最高行內頂端之間的距離加上基線與最低行內框底端之間的距離

行內非替換元素

內容區

　　對於行內非替換元素或匿名文本某一部分，font-size值確定了內容區的高度。如果一個行內元素的font-size為15px，則內容區的高度為15px

行內框

　　內容區加上行間距等於行內框。如果一個行內非替換元素的font-size為15px，line-height為21px，則相差6px。用戶代理將這6像素一分為二，將其一半分別應用到內容區的頂部和底部，這就得到了行內框

　　當line-height小於font-size時，行內框實際上小於內容區

行框

　　行框定義為行中最高行內框的頂端到最低行內框底端之間的距離，而且各行框的頂端挨著上一行行框的底端

框屬性

　　內邊距、外邊距和邊框不影響行框的高度，即不影響行高

　　行內元素的邊框邊界由font-size而不是line-height控制

　　外邊距不會應用到行內非替換元素的頂端和底端

　　margin-left、padding-left、border-left應用到元素的開始處；而margin-right、padding-right、border-right應用到元素的結尾處

div{
    width: 200px;
    border: 1px solid red;
}    
span{
    border: 1px solid black;
    background-color: yellow;
    padding: 6px;    
    margin: 6px;
    font-size: 30px;
    line-height: 50px;
}

<div><span>測試文字測試文字測試文字</span></div>

行內替換元素

框屬性

　　行內替換元素有固有的高度和寬度，替換元素的整體包括內容、外邊距、內邊距和邊框來定義元素的行內框

　　替換元素可以增加行框的高度，但不影響line-height值

div{
    width: 300px;
    border: 1px solid red;
}    
span{
    border: 1px solid black;
    background-color: yellow;
    font-size: 30px;
    line-height: 50px;
}
img{
    height: 26px;
    padding: 2px;
    margin: 2px;
}

<div><span>測試文字測試<img src="backup/lamp.gif" alt="測試圖片">文字測試文字</span></div>

行高

　　行內替換元素需要使用line-height值，從而在垂直對齊時能正確地定位元素。因為vertical-align的百分數值是相對於元素的line-height來計算的。對於垂直對齊來說，圖像本身的高度無關緊要，關鍵是line-height的值

基線

　　預設地，行內替換元素位於基線上。如果向替換元素增加下內邊距、外邊距或邊框，內容區會上移。替換元素並沒有自己的基線，所以相對來說最好的辦法是將其行內框的底端與基線對齊。因此，實際上是下外邊距邊界與基線對齊

　　對於這種情況最常見的解決辦法是使圖像成為塊級元素，這樣它們就不會產生行框。另一種可取的辦法是將圖像的父級的line-height設置為0