css行盒的垂直对齐

多个行盒垂直方向上的对齐

1. 给没有对齐的元素(行盒)设置vertical-align垂直方向排列方式

   预设值:text-top text-bottom middle, 像素值, 百分比

图片的底部白边

1. 产生原因：img标签为行内元素，默认对其方式为vertical-align: baseline(基线对齐) 。图片默认的垂直对齐方式是基线，
   基线的位置与字体相关，所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。
   不同的 font-size 会造成这个空隙的高度大小

2. 图片的父元素是一个块盒，块盒高度自动，图片底部和父元素的底边往往会出现空白

           解决办法：1.设置父元素的字体大小为0;[缺点：不能显示div中的文字]

                    2.将图片设置为块盒(display:block)

                    3.给图片加上vertical-align: bottom