display:inline-block，block，inline的區別與用法

https://www.cnblogs.com/hy-sunny/p/5602236.html

 

1、首先要了解什麼是塊級元素與行級元素

塊級元素

會佔領頁面的一行，其後多個block元素自動換行、 能夠設置width，height，設置了width後一樣也佔領一行、一樣也能夠設置   margin與padding屬性。

ps:常見的塊級元素:div,img,ul,form,p等

行級元素

與其餘元素在同一行上，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不能夠改變。

ps：em，strong，br,input等

display:inline-block，block，inline元素的區別

一、display：block將元素顯示爲塊級元素，從而能夠更好地操控元素的寬高，以及內外邊距，每個塊級元素都是重新的一行開始。

二、display : inline將元素顯示爲行內元素，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不能夠改變。多個相鄰的行內元素排在同一行裏，知道頁面一行排列不下，纔會換新的一行。

三、display：inline-block看上去值名inline-block是一個混合產物，實際上確是如此，將元素顯示爲行內塊狀元素，設置該屬性後，其餘的行內塊級元素會排列在同一行。好比咱們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內有不一樣高度內容的元素時，一般要設置對齊方式如vertical-align: top;來使元素頂部對齊。