inline元素的间距问题

我们经常遇见图片之间出现间距的问题，从这个问题入手，总结下原理。

任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。----《CSS权威指南》

图片文字等内联元素默认的对齐方式是和它的父级的 baseline 进行对齐的，撑开高度的却是元素整体的高度（bottom line）

解决方案：

1、变成块级元素，因为只有inline 元素才会发生这个问题；

2、vertical-align 的默认属性就是 baseline ，只要设置了跟 baseline 不一样的属性，都可以避免这个问题；

3、把inline元素浮动起来，因为已经不在当前文档流中了，布局的时候自然也就不会参照这个文字去进行对齐了；

4、把父元素的文字大小设成0，既然你根据文字的基线去对齐，直接把文字设没了，这样就没法定位了。

 

line-height与height高度相同,为什么就上下居中了？

在默认状态下，如果没有其他因素的干扰，文本会被一个content area box包裹，它的大小有字体的大小决定，这个时候content area box的大小和line box是相同的，当设置line-height属性之后，会有如下处理:

1.获取半行间距：半行间距=（line-height-content area box(也就是字体的大小)）/2。

2.然后把半行间距分别放置于content area box上下两侧，这样就获取了line box的高度尺寸。于是只要设置行高就可以产生一个高度，并且使文字居中。

 

如果一个元素是浮动的(float:left/right)，绝对定位的(position:absolute/fixed)或者是根元素(html)，那么它被称之为流外的元素(out-of-flow)。如果一个元素不是流外的元素，那么它被称之为流内的元素(in-flow)。

 

inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

 

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

{
  line-height: 30px;
  vertical-align: -10%;
}

// 相当于

{
  line-height: 30px;
  vertical-align: -3px;    /* = 30px * -10% */  
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

原文：https://www.jb51.net/html5/518714.html

http://www.softwhy.com/article-4133-1.html

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