Standard HTML elements are generally displayed in one of two ways:
1. inline: which allows the particular element to flow with other inline elements that either precede it or come after it. One such element is span, the following example demonstrates how such elements can flow together and even be on the same line.
Some plain text <span>followed by text within a span element</span> which is followed <span>by a second span</span>, which is ended by some more plan text.
... the above should flow with no blank lines between the span elements and the plain text (*), and should automatically wrap to the next line if necessary.
2. block: which causes the particular element to automatically appear on a different line than any preceding or following elements/content, it also allows the particular element to have assignable properties like height and width. Two such elements are div and p (paragraph), the following demonstrates the forced separate line behaviour.
Some plain text <div>followed by text within a div element</div> which is followed <div>by a second div</div>, which is ended by some more plan text.
... the output of the above example should appear over 5 lines.
The inline-block setting allows a block to flow with other content like inline does while still allowing other block related settings (like width and text-alignment) to work.
Some plain text <span style="display: inline-block; width: 20em; text-align: center;">followed by a block span element</span> which has been changed to be an inline-block with a fixed width and centered content.
... if you removed the display: inline-block; part of the above span example's style attribute you will notice that the width and text-alignment settings no longer have an effect.
(*) Plain text is automatically converted by the web-browser into DOM Text-Nodes which are like an inline type element, this is why inline styled elements flow with Plain text content.