Before we talk about inline vs. inline-block we have to first talk about blocks. A block in CSS is an object that takes up the entire width of the page and has a line break above and below it.
Common block elements include:
As compared to a block, inline elements only take the necessary width of the object.
Common inline elements include:
Check out this graphic for all you visual learners
Knowing the default display properties of elements allows for the manipulation of inline and block elements. For example, using li as a default block in a navigation bar would lead to a vertical layout.
However, by changing the display of li to inline, the navigation bar can take a horizontal layout. In fact, that's how the above nav bar is written.
Ok, so what about the pesky inline-block?
The easy answer is that inline-block is a hybrid of both inline and block display that allows elements to be displayed in the same line while still retaining some block characteristics. This means that pre-set style elements such as height and width from block displays would be retained in an inline-block whereas with inline only margins and padding can be adjusted.
Ummm...
Perhaps an example would be useful.
Let's say you had a collection of divs or images that you wanted to arrange in a nice grid. Blocking them would obviously just stack them vertically, and inlining them would not allow for variations in div height, width and other block level style elements. Hmmmmm...
...why not Zoidberg?
Just kidding. Why not display inline?
Like this
Notice that the original heights of the images where retained using inline-block.
For more in-depth information and examples check out some of the sources below
Coming Soon!
Copyright Jordan M. Schreuder 2014