You have already learned that the two basic types of HTML elements are inline and block
as demonstrated in this sentence. Recall that the CSS Box Model lets you style all aspects of a block element: inner content, padding, border, and margins. In contrast, 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 because it is an inline element. 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 actually a span that has been set in the CSS to display as inline-block. The browser has obeyed all of the box model styles applied to it even though span is an inline element.
Inline Blocks are very useful. Displaying anchor elements as inline-blocks to create Button Links is one common example. Inline blocks provide added flexibility in a variety of situations.
You can easily place them
side by side or
stack
them.
As a final note on this topic, it is important to note that it would be tempting to turn list item blocks into inline-blocks to create horizontal nav bars instead of floating the list items (which are blocks by default). But that is not the recommended way to do it. Inline blocks have a significant limitation that involves whitespace.
Look at the HTML source code to see why there is a space between the two words below
dog
cat
and why there is no space between the two words below.
dogcat
Although you can style all box model properties of an inline-block they still behave like inline elements in the page layout flow. So if you did try to create a horizontal nav system by turning the list items into inline-blocks, you would have to do the following with all your list items in the source code to eliminate whitespace between them.
<li>dog<\li><li>cat<\li>
That would be pretty gnarly for a long list with a lot of list items and links inside the list items.
It seems like inline elements would be the perfect replacement for floated blocks, but floated blocks still have advantages because they are blocks.