➢Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
➢Also, with display: inline-block the top and bottom margins/paddings are respected, but with display: inline they are not.
➢Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
➢The following example shows the different behavior of display: inline, display: inline-block and display: block:
EXAMPLE:
span.a {
display: inline;
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;
}
