Verglichen mit display: inline, der Hauptunterschied ist dass display: inline-block / display: block eine Breite(width) und Höhe(Height) erlaubt für das Element.
Ebenfalls mit display: inline-block / display: block Margin/Padding sind respektiert.
Verglichen mit display: block, der Hauptunterschied ist das display: inline-block / display: inline keinen Zeilenumbruch nach dem Element einfügt,
so die Element nebeneinander platziert werden können.
Das folgende Beispiel zeigt das unterschiedliche Verhalten von display: inline, display: inline-block und display: block:
<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline;
border: 1px solid grey;
background-color: dodgerblue;
}
span.b {
display: inline-block;
width: 95px;
height: 50px;
padding: 5px;
border: 1px solid grey;
background-color: dodgerblue;
}
span.c {
display: block;
width: auto;
height: 50px;
padding: 5px;
border: 1px solid grey;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die display-Eigenschaft</h2>
<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="a">Aliquam</span><span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.</div>
<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="b">Aliquam</span><span class="b">venenatis</span>gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.</div>.
<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="c">Aliquam</span><span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.</div>
