CSS内联元素

参考博客 https://www.cnblogs.com/wfeicherish/p/8884903.html

定义

内联元素（html规范中的概念）英文：inline element，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素，通常会涉及到的属性是display:inline；这个属性能够修复著名的IE双倍浮动边界问题。

常见的内联元素：

• a – 锚点
• br – 换行
• code –计算机代码(在引用源码的时候需要)
• i – 斜体
• img – 图片
• input – 输入框
• label – 表格标签
• span – 常用内联容器，定义文本内区块
• strong – 粗体强调
• textarea – 多行文本输入框

内联元素的性质

1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置margin，但只在水平方向有效。
4、内联元素可以设置padding，水平方向有效，垂直方向上的padding其实是存在的，但是不占行内的高度。举个例子：

	<style>
	     #box2{
            background-color: cornflowerblue;
            height: 200px;
        }
        #box2 span{
            vertical-align: top;
            border: 3px solid #111;
            padding: 10px;
            margin: 10px;
        }
        #box2 div{
            background-color: yellow;
            width: 100px;
            height: 100px;
        }
	</style>
    <div id="box2">
        <span>hhhgaajj</span>
        <div>test</div>
    </div>

给span加了一个border显示效果如下：（发现其实上下的padding也是存在的，但是会影响上下元素的占位）

我们一般说内联元素是指display属性值为inline的元素，即，非置换元素（non-replaced element），这些元素满足上面的三条性质，这部分常见的元素包括：

• span
• a
• strong
• em
  …

还有一些特殊的内联元素，主要包括三种：

1、可置换元素（Replaced element），如 img / input / select /textarea / button / label / svg 等，这些元素对应的就是非置换元素，不同之处在于可置换元素不用设置display属性，元素本身具有inline-block的性质。
2、所有 display 值以 inline-开头的元素，如 inline-table / inline-flex 。
3、处于某种特殊格式化上下文的内联元素，例如 flexbox。元素中的子元素都处于flex formatting context（弹性格式化上下文）中，这些子元素的 display 值都是「blockified」。

这些元素和非置换inline元素的区别在于:

• 特殊的三种内联元素可以设置宽高，以及能设置水平垂直方向上的padding和margin，他们虽然不单独占一行，但是在所占区域有block的特性，就像inline-block，其既具有block的宽度高度特性又具有inline的同行特性；而非置换inline元素不能设置宽高和垂直方向的margin和padding。

line-height设置垂直居中的原理

元素的line-height不设置时，默认值为normal，取决于元素的font-size。
元素的height不设置时，默认值为auto，等于line-height。

对于一个内联元素，它有两个高度：content-area（内容区高度）和vitual-area（实际高度），实际高度就是line-height，这个高度用于计算 line-box 的高度，line-height 并非表示两个 baseline 之间的距离。

virtual-area 和 content-area 高度的差异叫做 leading。leading 的一半会被加到 content-area 顶部，另一半会被加到底部。因此 content-area 总是处于 virtual-area 的中间。

所以当设置line-height等于盒子的height时，content-area高度如果小于height，leading一定是一半在顶部一半在底部，这样就实现了居中。

line-box 计算的一些细节：

• 对于inline元素，padding 和 border 会增大 background 区域，但是不会增大 content-area（不是 line-box 的高度）。一般来说你无法再屏幕上看到 content-area。margin-top 和 margin-bottom对两者都没有影响。
• 对于可替换内联元素（replaced inline elements）、inline-block 元素和blockified 内联元素，padding、margin 和 border 会增大 height（译者注：注意 margin），因此会影响 content-area 和 line-box 的高度。
• 受其子元素的 line-height 和 vertical-align 的影响。

另外补充一点：

line-height属性是可以被子元素默认继承的。
比如说：

<style>
 #box3{
   	width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: antiquewhite;
}
#box3 span{
    border: 1px solid red;
    font-size: 30px;
}
#box3 div{
    border: 1px solid red;
}

<div id="box3">
     <span>box3</span>
     <div>test</div>
 </div>

可以看到两个子元素span和div的line-height都变成了100px，而box3只有总的高度只有100px，所有div从容器溢出了。我们把父元素box3的高度去掉就好了。

vertical-align

vertical-align用于设置行内元素的垂直对齐方式。不设置时默认值为baseline，基于基线对齐。常用的有五个参数：

• vertical-align: middle，用父元素 baseline 高度加上父元素中 x-height 的一半的高度来对齐当前元素的垂直方向的中点。baseline 所处的高度跟字体有关，x-height 的高度也跟字体有关，所以 middle 对齐不是绝对的居中对齐！
• vertical-align: top / bottom，表示与 line-box 的顶部或底部对。
• vertical-align: text-top / text-bottom，表示与 content-area 的顶部或底部对齐。

对于下图中的img底部空隙问题 ，设置img的vertical-align属性为上面五个值都可以解决。