基线间距

代码如下：一个简单的div装在一个img中， 然而在预览时却发现这种情况 也就是说img下方会无缘无故出现一个空隙。然后你发现，只要给img元素加上一个属性 vertical-align:middle 就解决了问题！！！ 所以这是为什么呢？ 首先我们应该知道img是一个行内块元素，而行内块元素的默认对齐方式则是基线对其，下面通过我们熟悉的文字对齐来解释说明一下 像上图一样，图中文字的对其方式就是基线对齐，不过我们也会发现这样的话文字和底部会有一段距离， 而图片就相当于是其中的x，他的最底部对齐的是基线，所以当line-height到达一定高度时下方的距离就会存在。 针对上面的问题有如下解决方法 1、而当你设 div的line-height:0 时也可以解决问题，或者font-size:0也是可以的 2、当然你设置图片的margin-bottom也可以解决，不过会影响你div中的布局 3、当我们设置vertical-align为top bottom middle时则使得其不再相对基线对其而是相对于顶部或中部对齐，这样就不会产生间距了，而一般布局都是居中对齐，所以用middle时较多。 来源： https://www.cnblogs.com/axu1997/p/11758521.html

写html自适应的时，有些时候你包了一个块之后，在里面插入图片，设置了不超过盒子的宽高。图片却并不会在盒子里面。它会溢出。遇到这个问题是基线对齐的问题，这个时候你可以去改变它的基线对齐方式，verticle-middle，或者verticle-top。之类的语句去改变它对齐的方式。让他回到盒子内部。 当年在正常块盒排版的时候，你已经在通配符里面设置了margin:0;padding:0;但是在网页中显示的时候，上下块盒之间会出现莫名其妙的间距，检查的时候，也没有显示他们有margin，这个时候可以通过弹性布局里面的竖直排列来解决这个问题display:flex;flex-direction:column; 来源： https://www.cnblogs.com/gao2/p/11356280.html