Loading lesson path
Formula
The display: inline - block property combines the features of both inline and block elements.An element with display: inline-block will appear on the same line as other inline or inline-block elements. In addition, you can set the width, height, margin-top, and margin-bottom properties for the element (like block elements).
Formula
The following example shows the different behavior of display: inline, display: inline - block and display: blockExample 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;
}A common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates a horizontal navigation menu:
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;
}Specifies the display behavior (the type of rendering box) of an element