一、vertical-align
vertical-align是用來指定行內元素或者表格單元格元素的垂直對齊方式
vertical-align屬性可被用於兩種環境：
- 使行內元素盒模型與其行內元素容器垂直對齊。用於垂直對齊一行文本的內的圖片<img>
- 垂直對齊表格單元內容：
注意：vertical-align只對行內元素、表格單元格元素生效：不能用它垂直對齊塊級元素
<!DOCTYPE html> <html> <style> .bg { background-color: lightblue; border: black solid 1px; } .bg span{ background-color: lightgreen; } </style> </head> <body> <div class="bg"> <img src="hello.jpg" alt=""> <span class="span1">abc</span> <span class="span2">abc</span> </div> </body> </html>
內聯元素按順序在一行排列，但是當給外層div加上背景色和邊框之后就發現問題了
圖片下方出現了空白，這是由於img元素的vertical-align屬性默認為baseline,baseline意味着元素的基線和父元素的基線對齊，父元素的基線為字母abc下邊緣（線），但是像圖片或者輸入框這種元素，本身沒有基線，則是將其低端和父元素的基線對齊。
圖片下方的空白處高度是怎么確定的呢？
其實就是字符的基線baseline和bottom之間的距離，而這個距離是由line-height決定的，line-height默認值是normal，通常將normal理解為1，或者1.2，
在CSS中，line-height 屬性設置兩段段文本之間的距離，也就是行高，如果我們把一段文本的line-height設置為父容器的高度就可以實現文本垂直居中了
