行内非替换元素（文本）
- 行内框的高度由line-height决定
- margin-left \ right、padding-left \ right会改变布局，使文字左移或者右移。
- margin-top \ margin-bottom 和 padding-top \ padding-bottom 和 border-top \ border-bottom不会改变布局，也不会改变行内框的高度。
- 但是在设置了border的情况下，会显示出来，可能会遮盖上下文本
- 在background有颜色的情况下，如果设置了padding-top\padding-bottom\padding-left\padding-right，会被显示出来，可能出现遮盖上下文本，因为默认background-clip : border-box。
- 例如：下图空白部分是margin:40px，但只显示了左右空白，上下不受影响，pading:20px，虽然上下左右的padding都在背景颜色的作用下显示出来，但显然padding-top与padding-bottom并没有影响相邻行文字的布局。
![B8KSH]7]%U]`%Y$NSOO_GO1.png](http://upload-images.jianshu.io/upload_images/4101739-13d91d54ad38de6a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 行内元素的边框（border）【注意不是行内框也不是行框，只是border属性】，边框边界围绕的是内容区（font-size决定）而不是行内框（line-height决定）。
行内替换元素（img）
- line-height对替换元素无效
- 行内框的高度由height、上下方向的margin\padding\border决定
- line-height对图像的行内框没有任何影响，也不会随着行内框的增大而改变。
- 但由于vertical-align的计算依赖于line-height，所以还是要设置line-height
inline-block元素
- 其基线就是元素里面最后一行内联元素的基线。如果inline-block里面没有inline内联元素，或者overflow不是visible（默认是visible,即被修改过后），则该元素的基线就是其margin底边缘。
可以使内联元素设置宽高的行为：
- 定位类：（这三种如果没有设置，会自动缩减为适应内容的宽高，并且这三者都会形成BFC环境）
- float:left
- position:absolute
- position:fixed
- 类型控制：
- display:block
- display:inline-block
- display: table-cell;
- display:flex
