曖昧で間違えやすいCSSのdisplayプロパティの、「display:inliine;」と「display:inliine-block;」と「display:block;」の違いについてまとめてみました。
主な違いとしては上図の表のとおりです。
表だけだと把握しづらいと思いますので以下にサンプルを示します。
<span class="inline">インライン要素です</span>
<span class="inline">インライン要素です</span>
<span class="inline">インライン要素です</span>
<span class="inline">インライン要素です</span>
<span class="inline">インライン要素です</span>
<hr>
<span class="inline-block">インラインブロック要素です</span>
<span class="inline-block">インラインブロック要素です</span>
<span class="inline-block">インラインブロック要素です</span>
<span class="inline-block">インラインブロック要素です</span>
<span class="inline-block">インラインブロック要素です</span>
<hr>
<span class="block">ブロック要素です</span>
<span class="block">ブロック要素です</span>
<span class="block">ブロック要素です</span>
<span class="block">ブロック要素です</span>
<span class="block">ブロック要素です</span>
こんな感じでHTMLを用意しました。5つずつspan要素を用意して、それぞれにdisplayプロパティに対応する値の名称をクラス名につけました。
各エリアがわかりやすいようにhrで区切り線を入れています。
まずはこの状態でブラウザで見てみると、
こんな感じになります（わかりやすいようにhtmlタグの背景色をグレーにしています）。CSSがあたっていなければspan要素はインライン要素なので、すべてが横並びになっていますね。
このhtmlに以下のようなCSSをあてます。
span {
line-height: 5;
width: 300px;
height: 60px;
margin: 10px;
padding: 10px;
text-align: center;
background: #fff;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.block {
display: block;
}
すべてのspan要素にかかるCSSと、先ほどhtmlでつけたクラス名に対応するdisplayプロパティを各クラスにかけました。
その結果、
こうなります。ひとつずつ確認していきましょう。
インライン要素（display:inline;）
aタグやspanタグなどのインライン要素は縦横のサイズ指定ができません。なのでwidthやheightが指定されているにも関わらずサイズが変わっていません。
そしてmarginが上下にはかかりません。しかしline-heightが要素の外側（パディングの外、マージンのような感じ）にかかります。
paddingは上下にかかりますが、行間には影響せず重なりあう場合があるので、マージンと同じく左右のみ、と考えてもよろしいかと。
画面の端まで達すると内容の途中でも改行されます。
インラインブロック要素（display:inline-block;）
imgタグに代表されるインラインブロック要素は、インライン要素と違い縦横のサイズ指定が可能です。マージン、パディングを上下左右にかけることも可能です。
インラインブロック要素も横並びに表示されていきますが、インライン要素とは違い、画面端に横幅が入らない時は、改行される点が異なります。
line-heightは内側に適用されるます。画像内の文字がボックスの下側に配置されているのはline-heightが内側に影響しているためです。
ブロック要素（display:block;）
ブロック要素は縦横のサイズ指定、パディングとマージンのを上下左右にかけることができるという点はインラインブロックと同じです。
大きく異なる点としては、ブロック要素は常に積み重なるように配置されていく点と、vertical-alignが適用されない点です。
displayプロパティには他にもdisplay:flexやdisplay:tableなど、他にも色々とありますが、今回紹介した３つは特に使用頻度が高いので、それぞれ違いを把握して正しく使えるようにしましょう。
追記：floatについて
各要素のfloat事情について質問がありましたので追記しますが、結論からいうとfloatはdisplayに関係なく同じ見た目になります。
上記の例で、spanタグに「float」をかけると、上画像のようにすべて同じ見た目になります（上画像はfloat:right;をspanタグにかけています）。
これはなぜかというと、floatプロパティには「ほとんどのタグでdisplayプロパティの値をblockに変更する」という性質があるからです（一部例外はあります）。
つまり今回は、spanタグにfloatをかけた時点で、各クラス毎にかけてあったdisplay属性がリセットされて、すべてblock要素になってしまったので、同じ見た目になった、というわけです。