CSS -Layout - Anzeige: Inline-Block
Die Anzeige: Inline-Block-Wert
Im Vergleich zu display: inlinebesteht der Hauptunterschied darin, dass display: inline-blockes möglich ist, eine Breite und Höhe für das Element festzulegen.
Auch bei
display: inline-blockwerden die oberen und unteren Ränder/Auffüllungen respektiert, bei display: inlinenicht.
Im Vergleich zu display: block, besteht der Hauptunterschied darin, dass display: inline-blocknach dem Element kein Zeilenumbruch hinzugefügt wird, sodass das Element neben anderen Elementen stehen kann.
Das folgende Beispiel zeigt das unterschiedliche Verhalten von display: inline, display: inline-block
und display: block:
Beispiel
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Verwenden von Inline-Block zum Erstellen von Navigationslinks
Eine häufige Verwendung von display: inline-block
ist, Listenelemente horizontal statt vertikal anzuzeigen. Das folgende Beispiel erstellt horizontale Navigationslinks:
Beispiel
.nav {
background-color: yellow;
list-style-type: none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding:
20px;
}