6.6 inline盒子
6.6.1 规范规则与底层逻辑
inline盒子主要包括三项基本的规范规则。
规则1：inline盒子设置width与height无效。
规则2：inline盒子设置padding-top、padding-bottom、border-top、border-bottom并不影响文本内容的垂直方向位置，即：不影响占据区域，只影响显示区域。
规则3：inline盒子设置margin-top与margin-bottom无效。
底层逻辑
文本排版有着特殊性，规范规则与底层逻辑对应文本排版的设计。
（1）按照IFC模型的设计，inline盒子内部是文本，由文本内容自动撑宽撑高。文本的宽高主要通过font-family、font-size、line-height这三个字体属性对文本内容进行自动计算，所以width、height设置无效。
（2）按照IFC模型的设计，inline盒子垂直方向默认按照vertical-align: baseline进行基线对齐，如果调整需设置vertical-align属性，所以padding等设置不改变它的垂直位置。垂直padding与垂直border设置仅影响显示区域，不影响占据区域。
（3）既然inline元素的padding、border、margin不影响文本的垂直方向占据区域，只影响显示区域，那么margin-top与margin-bttom设置也就没有意义。
6.6.2 width与height无效示例
示例代码如下。line-height设置在div而不是span元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
.span1 {
background-color: #eee;
}
.span1-1 {
color: #0aaa76;
}
.span1-2 {
background-color: #ddd;
color: #4aa6fc;
}
.span1-3 {
color: #ed7d31;
}
</style>
</head>
<body>
<div>小步教程 xiaobuteach.com</div>
<div style="font-size: 18px;line-height: 60px;">
<span class="span1-1">元素1</span>
<span class="span1-2" style="width: 200px;height: 200px;">元素2</span>
<span class="span1-3">元素3</span>
</div>
<div>小步教程</div>
</body>
</html>
运行效果如下。
父div的line-height属性使各span元素变高。开发者工具查看应用样式。
width与height属性呈灰色，表示设置无效。提示信息：“display: inline 属性可防止 height 产生影响。不妨尝试将 display 设为除 inline 之外的某个值。”
