目标大纲
1.vertical-align为何不起作用？？
vertical-align只钟情于“inline-block内联块级元素/inline元素”
vertical-align属性 text-bottom是与父标签的文字底部对齐
效果 
栗子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box {
background-color: #000;
color:#fff;
padding-left: 25px;
}
.dot {
display: inline-block;
4px;
height: 4px;
background-color: orangered;
vertical-align: text-bottom;/*是与父标签的文字底部对齐*/
}
</style>
</head>
<body>
<div class="box">
<span class="dot"></span>我是一段文本.....
</div>
</body>
</html>
2.如何消除图片下面的间隙是如何出现的？？
源代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vertical-align</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .box { 12 background-color: deeppink; 13 color: #fff; 14 padding-left: 10px; 15 line-height: 65px; 16 } 17 .inner-box { 18 display: inline-block; 19 width: 4px; 20 height: 4px; 21 background-color: black; 22 vertical-align: text-bottom; /*与父容器标签底部对齐*/ 23 } 24 25 .box_1 { 26 background-color: royalblue; 27 margin-top: 5px; 28 color: #fff; 29 padding-left: 10px; 30 } 31 .box_1 img { 32 width: 65px; 33 } 34 .box_1 span { 35 background-color: red; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="box"> 41 <span class="inner-box"></span> 42 这是一段文本内容_vertical-align...... 43 </div> 44 <div class="box_1"> 45 <img src="img/photo.jpg" /><span>这是一段文本内容_vertical-align......</span> 46 </div> 47 </body> 48 </html>
默认情况下图片vertical-align与一段文本的基线baseline对齐，由于文本存在line-height高度，所以就会出现间隙
3.如何消除图片下面的空白间隙？？
a.设置vertical-align值，vertical-align: top/middle/bottom;
img { vertical-align: top; }
b.让vertical-align失效，vertical-align 只对“inline-block内联块级元素”有效，我们只设置图片display:block就可以搞定
img { display: block;}
c.设置line-height行高足够小
div.box_1 { line-height: 5px;}
d.通过line-height间接控制，font-size字体足够小
div.box_1 { font-size: 0; /*字体足够小*/}
消除图片下面空白间隙的几种方法源码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>消除图片下面空白间隙的几种方法（原因vertical-align与line-height导致）</title> 6 <style> 7 .box_1 { 8 background-color: royalblue; 9 margin-top: 5px; 10 color: #fff; 11 padding-left: 10px; 12 font-size: 0;/*字体足够小*/ 13 /* line-height: 5px;*/ 14 } 15 .box_1 img { 16 /*vertical-align: top;文字与父标签的顶部对齐*/ 17 /*vertical-align: middle;*/ 18 /*display: block;*/ 19 } 20 .box_1 span { 21 background-color: red; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="box_1"> 27 <img src="img/photo.jpg" width="65"/> 28 <span>这是一段文本内容_vertical-align......</span> 29 </div> 30 </body> 31 </html>
【资料参考】
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
http://www.zhangxinxu.com/wordpress/2010/05/我对css-vertical-align的一些理解与认识（一）/