CSSdisplay: inline-block
The CSS display: inline-block
Thedisplay: inline-block property combines the features of both inline and block elements.
An element withdisplay: inline-block will appear on the same line as other inline or inline-block elements. In addition, you can set thewidth,height,margin-top, andmargin-bottom properties for the element (like block elements).
The following example shows the different behavior ofdisplay: inline,display: inline-block anddisplay: block:
Example
span.a {
display: inline; /* the default for span */
padding: 5px;
border: 2px solid red;
}
span.b {
display: inline-block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
span.c {
display: block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
Try it Yourself »display: inline; /* the default for span */
padding: 5px;
border: 2px solid red;
}
span.b {
display: inline-block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
span.c {
display: block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
Create a Horizontal Navigation Menu
A common use fordisplay: inline-block is to display list items horizontally instead of vertically. The following example creates a horizontal navigation menu:
Example
Create a horizontal navigation menu:
.nav {
background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}
Try it Yourself »background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}
CSS Property
| Property | Description |
|---|---|
| display | Specifies the display behavior (the type of rendering box) of an element |
