You have already learned that the two fundamental types of HTML elements are inline and block
Recall that the CSS Box Model lets you style all aspects of a block element: content area, padding, border, and margins.
But, you can't style all box model properties of inline elements. That is a significant limitation of inline elements.
For example, this Inline Element has CSS applied that sets all the following properties
to 500px (a large value): height, width, top/bottom margins. You can see that the browser is completely ignoring those CSS settings.
Inline elements were never intended to be styled like blocks. They are intended to flow with the text, rather than be used as large display structures.
CSS provides an inline/block hybrid that is created by setting the CSS display property to inline-block.
Such an element still flows inline with the text without carving a block out of the page, but you can style all its box model properties!
This Inline Block is a span element that has been set in the CSS to display as inline-block.
Thus, the browser has obeyed all of the box model styles applied to it because it is no longer treating it as an inline element.
Recall the example earlier in this lesson where the standard inline anchor (a) element was
styled to become a Button Link. Inline blocks provide added flexibility in a variety of situations.
You can style them like blocks, but also place them
side by side or
stack
them
but they don't carve entire blocks out of the page. Inline Blocks are a very useful hybrid between blocks and inline elements.