行內(nèi)非替換元素（文本）
- 行內(nèi)框的高度由line-height決定
- margin-left \ right、padding-left \ right會(huì)改變布局，使文字左移或者右移。
- margin-top \ margin-bottom 和 padding-top \ padding-bottom 和 border-top \ border-bottom不會(huì)改變布局，也不會(huì)改變行內(nèi)框的高度。
- 但是在設(shè)置了border的情況下，會(huì)顯示出來，可能會(huì)遮蓋上下文本
- 在background有顏色的情況下，如果設(shè)置了padding-top\padding-bottom\padding-left\padding-right，會(huì)被顯示出來，可能出現(xiàn)遮蓋上下文本，因?yàn)槟J(rèn)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)
- 行內(nèi)元素的邊框（border）【注意不是行內(nèi)框也不是行框，只是border屬性】，邊框邊界圍繞的是內(nèi)容區(qū)（font-size決定）而不是行內(nèi)框（line-height決定）。
行內(nèi)替換元素（img）
- line-height對(duì)替換元素?zé)o效
- 行內(nèi)框的高度由height、上下方向的margin\padding\border決定
- line-height對(duì)圖像的行內(nèi)框沒有任何影響，也不會(huì)隨著行內(nèi)框的增大而改變。
- 但由于vertical-align的計(jì)算依賴于line-height，所以還是要設(shè)置line-height
inline-block元素
- 其基線就是元素里面最后一行內(nèi)聯(lián)元素的基線。如果inline-block里面沒有inline內(nèi)聯(lián)元素，或者overflow不是visible（默認(rèn)是visible,即被修改過后），則該元素的基線就是其margin底邊緣。
可以使內(nèi)聯(lián)元素設(shè)置寬高的行為：
- 定位類：（這三種如果沒有設(shè)置，會(huì)自動(dòng)縮減為適應(yīng)內(nèi)容的寬高，并且這三者都會(huì)形成BFC環(huán)境）
- float:left
- position:absolute
- position:fixed
- 類型控制：
- display:block
- display:inline-block
- display: table-cell;
- display:flex
