Inline-block elements took the best of two worlds. On the one hand, they behave like inline elements and can appear next to each other. On the other hand, inline-block elements form a box, and you can adjust their width and height, like block-level elements. The basic CSS syntax looks like this:

{

display:inline-block;

}

The display:inline-block and display:inline-flex are quite similar declarations, but they have one distinct difference. Flex items don't behave inline — the whole container does. In turn, inline-block elements aren't flexible and don't have the same height if the amount of content is different.