What you said is pretty much correct: “an inline-block element seems to be able to do anything a block element can do, but with a little extra styling.” This is mostly due to the fact that the one thing both have in common is the fact that they are both block containers.
However, there’s a catch.
A block box participates in a block formatting context, and an inline-block participates in an inline formatting context (although it establishes a block formatting context for its descendants, just like a block box does under certain conditions). See section 9.4. Basically, this means an inline-block is treated as though it were text, which in turn means most properties that usually apply to text would also apply to an inline-block. These properties include text-indent, text-align and vertical-align, among others.
This can cause undesired side effects which you can easily prevent by not using display: inline-block in the first place. See this question for an interesting example of what can happen.
The box model for inline-blocks also differs somewhat from that of block boxes. Section 10 contains all the nitty gritty details, but the main differences are:
-
Without the
width: 100%declaration, as you may have suspected, an inline-block will shrink to fit its contents. -
Because an inline-block flows inline, you can’t center it with auto left and right margins. You use
text-align: centerinstead. It goes without saying that it must then be on its own line with no text surrounding it on the same line, but if you’re settingwidth: 100%then this won’t be a problem. -
Inline-blocks are never affected by margin collapse.
If you’re trying to create a block-based layout, you should be using display: block. Generally speaking, when deciding between the two, you should always default to display: block, and only choose display: inline-block if you have a very good reason to (and no, blocking margin collapse is not what I would consider a good reason).