vertical-align与line-height

有这样一个经典的问题，以下代码为什么图片下面有空隙呢？

    .omg{
        background-color:red;
    }
    

        
    

image.png

其实，这就是vertical-align和line-height搞的鬼！！！！首先，大家一定要意识到这么一点：对于内联元素，vertical-align与line-height虽然看不见，但实际上到处都是！
那这两个到底是什么东西呢？

关于line-height

看代码：

    我是一个大傻逼
    我是一个大傻逼

.word-wrap{
   background-color:blueviolet;
 }
 .word1{
   line-height: 60px;
   color: #fff;
   background-color: black;
   vertical-align: middle;
  }
 .word2{
   color: #fff;
   background-color: black;
   vertical-align: middle;
 }

子元素的line-height会把父元素的高度撑开，而不是把自己撑开。

image.png

可以看到子元素的高度是跟自己的内容高度一致的，父元素的高度就是我们设置的line-height:60px
如果line-height >子元素的高度，那么多出来的高度就会均分在子元素的顶部和底部。这就可以被我们用来实现垂直居中啦，真是机智！

关于vertical-align

vertical-align有好多种属性值啊啊啊

/* 关键字值 */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <长度> 值 */
vertical-align: 10em;
vertical-align: 4px;

/* <百分比> 值 */

vertical-align: 10%;

/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

那么问题来了？我们对于内联样式完全没有去设置vertical-align，那么vertical-align默认的对齐方式是什么呢？

vertical-align默认值是baseline, 也就是 基线对齐。
什么是基线呢？
基线就是字母X的下边缘，咦，我们看

如果更改html代码如下，我们可以看到

    XX

image.png

妈呀，真的是和X的下边缘对齐的！！！
但是X他本身也有高度啊，我们给X加个背景颜色，这时候一切都迎刃而解了

image.png

后面XX文字的高度从何而来？？？
后面XX文字的高度是由行高决定的！也就是我们的line-height

所以，造成了我们开头所说的那个问题的罪魁祸首就是line-height和vertical-align。

如何解决？

1. 让vertical-align失效，因为vertical-align只对行内元素感冒，如果我们给img加上display:block的属性就不会有空隙啦

   
   
   image.png
   
   

   不过不要影响到页面本来的布局哟

2. 我们也可以给vertical-align设置其他的值，设置vertical-align:bottom

    img{
        vertical-align: bottom;
    }
    .Xcolor{
        background-color:#fff;
        vertical-align: bottom;
    }
   

参考博文来自张鑫旭大神

https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/