2.基線是什麼
三、邊界相關
text-top和text-bottom
從字面意思可以看出vertical-align是針對其垂直方向的位置調整，和text-align屬性對應使用。乙個控制縱向的位置，乙個控制橫向的位置。但需要注意的是vertical-align是用來控制行內元素的位置屬性
vertical-align 屬性設定元素的垂直對齊方式。
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。
取自w3c
>test1，看好我的位置<
/span>
"border: 1px solid black;display: inline-block;overflow: hidden;height: 80px;"
>test2看好我的位置<
/span>
<
/div>
這裡我們把每乙個元素的邊框都加上，相對於其邊框，內容的位置就是基於某一邊的邊框的位置，該邊框就稱之為基線（個人理解）從上個例項中可以看出
1.img標籤和第乙個span標籤的內容部分底端是對齊的，邊框則因為行內元素和塊級元素的區別存在位置的區別
2.img元素的基線就是其底端，即下邊框
3.inline-block元素（test2）的基線則是前面行內元素（test1）的基線
4.由test2可知overflow不是visible的inline-block元素的基線是其下邊框
"background: pink"
>
"vertical-align: super"
>向上<
/span>
測試文字
"vertical-align: sub;"
>向下<
/span>
<
/div>
"background: pink"
>
"vertical-align: -10px"
>負值效果<
/span>
測試文字
"vertical-align: 10px"
>正值效果<
/span>
<
/div>
由效果圖看出，設定了其vertical-align的sub和super屬性以及正負值就可以使文字上下偏移，實則是將其的基線（margin-bottom）上下移動top：（內聯）元素的頂邊和行內最高元素的頂邊對齊bottom：元素的底邊和行的底邊對齊。
"background: pink"
>
預設"vertical-align: top"
>預設<
/span>
"font-size: 30px;height: 100px;border: 1px solid black;vertical-align: middle"
>middle<
/span>
middle並不是真的居中，而是近似。受字型大小的影響會產生偏移。text-top：元素頂邊和父級的內容區域頂邊對齊text-bottom：元素底部和父級的內容區域底部對齊
還記得在基線部分，我說過行內元素和img元素的基線是下邊框嘛，而行內元素又受inline-block的影響，基線保持和=inline-block一致，因此例項中更改img標籤的vertical-align==屬性，導致其他span標籤產生位置變化
解析vertical align屬性
vertical align 該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是公升高。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。即 1.只對行內元素起作用 若屬性中有display inline block 或float...
vertical align各個屬性總結
vertical align baseline 預設值，字母abcd的底部 text bottom 文字底部，大概會和字母g的底部 middle 整體的中部 top 整個容器的頂部 bottom 整個容器的底部 super 上標的位置 sub 下標的位置,會比textbottom低一點 super ...
元素的vertical align屬性
一，vertical algin元素的屬性值 二，vertical align只對以下元素起作用 1，inline 2,inline block 3,inline table 基本的inline元素都是標籤裹著文字。inline block元素 是在行內中的塊級元素。他們可以有寬度和高度 通常情況下...