Inline vs Inline Block
HTML Elements
HTML elements have a default display value. They are either inline or block-level elements.
Block-level elements start on a new line, and take up the full width available. Examples include: headings (h1, h2, etc.), div, p.
Meanwhile, inline elements do not start a new line, and their width is limited to only what is needed. Examples include: span, a, img.
Inline and Block examples:
As you can see above, the block element has taken up the entire space provided and started on a new line, whereas the span element is self-contained and continued on the same line.
As mentioned above, inline and block are the default elements assigned to HTML elements. With CSS, it is possible to change the default setting of elements using the "display" function. We can assign usually inline elements like images to be "block", and ususally block elements like paragraphs to be "inline".
It is also possible, using CSS, to assign height and width parameters to both block and inline elements. However, these will not affect inline elements, as they are hardcoded to only take up the required area. Therein comes "inline block" elements.
Inline Block examples:
Hello, I'm a block element!
Hello, I'm an inline element!
Hello, I'm an inline-block element!
Each of the above elements have been given a background colour and a height of 50px.
We can see that the block has without a width being set, the block element has taken up the entire space provided. The inline and inline-block elements have only taken up the width necessary for their contents, but the inline element has not been affected by the height setting.