display的幾個常用的屬性值

inline:

1. 使元素變成行內元素，擁有行內元素的特性，即可以與其他行內元素共享一行，不會獨佔一行. 
2. 不能更改元素的height，width的值，大小由內容撐開. 
3. 可以使用padding，margin的left和right產生邊距效果，但是top和bottom就不行.

block:

1. 使元素變成塊級元素，獨佔一行，在不設定自己的寬度的情況下，塊級元素會預設填滿父級元素的寬度. 
2. 能夠改變元素的height，width的值. 
3. 可以設定padding，margin的各個屬性值，top，left，bottom，right都能夠產生邊距效果.

 inline-block:

1. 結合了inline與block的一些特點，結合了上述inline的第1個特點和block的第2,3個特點.
2. 用通俗的話講，就是不獨佔一行的塊級元素，和float浮動類似。

inline-block佈局 vs 浮動佈局

不同之處：

對元素設定display：inline-block ，元素不會脫離文字流，而float就會使得元素脫離文字流，且還有父元素高度坍塌的效果

相同之處：

某些情況下能達到相同的效果，如下：

浮動不好的情況：

inline-block存在的小問題

上面可以看到用了display:inline-block後，存在間隙問題，間隙為4畫素，這個問題產生的原因是換行引起的，因為我們寫標籤時通常會在標籤結束符後順手打個回車，而回車會產生回車符，回車符相當於空白符，通常情況下，多個連續的空白符會合併成一個空白符，而產生“空白間隙”的真正原因就是這個讓我們並不怎麼注意的空白符。

去除inline-block的空隙：對父元素新增，{font-size:0}，即將字型大小設為0，那麼那個空白符也變成0px，從而消除空隙

轉載自：https://www.cnblogs.com/Ry-yuan/p/6848197.html