9.9 原子行内级盒子
IFC模型中，line box内除了inline盒子，还能够包含其它inline-level盒子，这些盒子称为原子行内级盒子（atomic inline-level box），即非inline的inline级盒子。
inline-level = inline + atomic inline-level
原子行内级盒子包括：可替换元素、inline-block、inline-flex、inline-table。原子行内级盒子与inline元素的区别包括两个方面：（1）高度计算及垂直位置变化、（2）基线位置。这也是为什么存在这个术语的原因。
试一试。img虽然display: inline设置margin-top改变垂直占位。
9.9.1 高度计算模型
原子行内级元素以盒子模型参与行盒高度计算，margin、border、padding进行垂直占位。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
.span1 {
color: #0aaa76;
}
.span2 {
/* display: inline-block; */
margin: 15px;
padding: 5px;
border: 5px solid #7030a0;
background-color: #ddd;
color: #4aa6fc;
}
.span3 {
color: #ed7d31;
}
</style>
</head>
<body>
<div class="div1">div1 小步教程 xiaobuteach.com</div>
<div class="div2">
<span class="span1">元素1</span>
<span class="span2">元素2</span>
<span class="span3">元素3</span>
</div>
<div class="div3">div3 小步教程</div>
</body>
</html>
span2盒子设置不改变它的垂直占位，margin-top与margin-bottom无效。
将span2设置display: inline-block，垂直方向的padding、border、margin都相应占位。
span2以盒子模型高度参与行盒计算。行盒计算高度的规则与之前基本一致，但是需要确定inline-block元素的基线位置在哪里，才能进行对齐以最终确认行高。
9.9.2 基线位置规则
CSS规范为原子行类级盒子的每种具体类型定义基线位置。
（1）图片等替换元素：元素底部。
（2）inline-block：内部最后一个元素的基线。如果是多行文本，则是最后一行文本的基线。
（3）inline-table：table的第1行tr的底部。
（4）inline-flex：第1列第1行文本的基线。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
font: 20px/1.5 Arial,微软雅黑;
}
.not-inline{
border: 1px solid #0aaa76;
}
</style>
</head>
<body>
<div>
<span>xj</span>
<!-- 1.image -->
<img class="not-inline" src="image/no-middle.png" style="width: 50px;">
<!-- 2.inline-block -->
<span class="not-inline" style="display: inline-block;">
<div>inline-block 第1行</div>
<div>inline-block 第2行</div>
</span>
<!-- 3.inline-table -->
<table class="not-inline" style="display: inline-table;">
<tr>
<td>inlne-table</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
<!-- 4.inline-flex -->
<div class="not-inline" style="display: inline-flex">
<div>
<div>inline-flex</div>
<div>1-2</div>
</div>
<div>
<div>第2列</div>
<div>2-2</div>
</div>
</div>
</div>
</body>
</html>
示例效果
谨慎使用原子行内级元素。因为基线比较特殊，可能影响原先行盒高度，导致行盒被撑高以及二次移动，可能导致原先inline元素的位置也跟随变化。
