CSS Layout inline-block
CSS Layout inline-block
Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.
The following example shows the different behavior of display: inline, display:
inline-block and display: block:
Example
span.a {
width: 100px;
height: 100px;
padding: 5px;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
background-color: yellow;
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
background-color: yellow;
ADVERTISEMENT
One common use for display: inline-block is to display list items horizontally
instead of vertically. The following example creates horizontal navigation
links:
Example
.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;