多个行盒垂直方向上的对齐
-
给没有对齐的元素(行盒)设置vertical-align垂直方向排列方式
预设值:text-top text-bottom middle, 像素值, 百分比
图片的底部白边
-
产生原因:img标签为行内元素,默认对其方式为vertical-align: baseline(基线对齐) 。图片默认的垂直对齐方式是基线,
基线的位置与字体相关,所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。
不同的 font-size 会造成这个空隙的高度大小 -
图片的父元素是一个块盒,块盒高度自动,图片底部和父元素的底边往往会出现空白
解决办法:1.设置父元素的字体大小为0;[缺点:不能显示div中的文字]
2.将图片设置为块盒(display:block)
3.给图片加上vertical-align: bottom