The Inline-Block Conundrum – Part 1

Karen Menezes on June 16, 2013

Code

display: inline-block

It’s somewhere in-between inline and block. And it’s often precisely what you need.
When nothing else can cut it, display: inline-block does the job.
Of course, it doesn’t come without its share of quirks. Let’s tackle the eccentricities a little down the road…

I've made a nice demo, which is quite in-depth. You can view it here.

Before understanding the essence of inline-block in layout, it’s important to understand block-level and inline-level elements in our HTML markup. Most of us kind-of-understand the basics, but falter when asked to explain the differences between the two.

These concepts have different connotations in our:
HTML (where they are ‘semantically’ oriented and define the content model for what kinds of elements can be nested within such elements.)
CSS (where they deal with the presentation and layout of these elements).

Before HTML5, elements were simply divided into inline-level and block-level elements.

Inline level elements can be of two kinds and both have different properties:
a) Inline non-replaced elements: like span, a, em, strong, sub, sup, etc.
b) Inline replaced elements: like img, embed, iframe, video, audio, canvas, object, math, inputs, svg, etc.

Do note that HTML5 moves away from the terms block-level and inline-level elements in its content model, to avoid the ambiguity for elements that did not fit in either category. This also dispenses with the confusion of using these terms in CSS, where they have a different context for display.

Instead, HTML5 allows elements to belong to multiple categories. Some of these new categories include flow, phrasing, embedded, interactive, etc., but this merits a separate discussion or blog post. What might be of interest is the flow content (roughly like HTML4's "block-level" and "inline") and phrasing content (roughly like HTML4's "inline"). You can read more about this here.

Let’s quickly and loosely segregate HTML elements:

	BLOCK-LEVEL	INLINE-LEVEL
*Appearance*	Appears as an independent block of content, because the browser generates a linebreak before and after the element.	Appears in-line i.e. will not break its content onto a new line.
*Content Model*	Can generally contain other block-level or inline elements. Exceptions include p, h1-h6, address that can contain only inline-level content.	We can segregate these into: 1) Inline non-replaced elements: Can generally contain only other inline elements. Exceptions include the link element in HTML5 that can wrap block level elements (provided they don’t have interactive content like buttons or other links within them). You can read more here. 2) Inline replaced elements Has its content replaced by another source (e.g. an image or a video) Generally contain inline, but even block content, depending on the context.
*Width & Height*	In their default state, block-level elements get their width from their parents (by expanding to fit the width of their parent container). Their default height is obtained from the height of their content (in its default state).	We can segregate these into: 1) Inline non-replaced elements: E.g. span, em, strong, a, etc. They have no intrinsic width or height. Only the line-height is used when calculating the height of the line box. You can’t set a height or width and expect it to be honoured. It won’t. 2) Inline replaced elements: E.g. img, audio, video, object, embed, etc. They generally obtain their width and height from the replaced content’s dimensions. Thus they often have an intrinsic width, height and ratio. You can also set the width and height and expect it to be honoured.
*Padding*	Block level elements accept padding.	1) Inline non-replaced elements: Accept values for padding. However, padding-top and padding-bottom do not affect the height of the element. See demo here 2) Inline replaced elements: Just like block-level elements, inline-replaced elements respect padding.
*Borders*	Block level elements accept borders.	1) Inline non-replaced elements: Accept borders. Multi-line inline elements behave as expected. 2) Inline replaced elements: Borders behave as block elements do.
*Margins*	Block level elements respect margins.	1) Inline non-replaced elements: Accept values for left and right margins. The spec says, “vertical margins will not have any effect on non-replaced inline elements”. See more here. Margin-top and margin-bottom are ignored and will not be respected. See demo here 2) Inline replaced elements: Just like block-level elements, inline-replaced elements respect margins.
*Vertical alignment*	Ignores the vertical-align property	Adheres to vertical-align properties – the default is generally baseline.

You can take a look at the demo here.

Credits

Thumbnail: Image by Tandem X Visuals on Unsplash

Banner: Image by Patrick Tomasso on Unsplash

Related Tags

Inline Block ALL TAGS

karen.menezes@gmail.com