UX Design and Development course

Block vs. Inline-block vs. Float

Block-level elements

"Block-level" is categorization of HTML (Hypertext Markup Language) elements, as contrasted with "inline" elements. Block-level elements may appear only within a <body> element. Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content). That is, they take up [100% of] the width of their containers.

See a complete list of block elements.

Inline elements

"Inline" is categorization of HTML elements, as contrasted with "block-level" elements. Inline elements can appear within block-level or other inline elements. They take up the width of their contents.

See a complete list of inline elements.

Inline-block elements

Inline-block elements take characteristics from both inline and block elements. There are NO native inline-block elements, this is a value to be set to the display property.

Inline-block elements give you the best of both worlds where you can get the properties of a block level element without it dominating the space and flow the content.

Used for layout

source

We’ve been using floats for layout pretty much since we left tables behind. It’s a quirky solution that can often cause troubles, but if you know what you’re doing, it works.

One interesting alternative to floats that people are turning to more and more lately is to set the display value of an element to inline-block. What does this do exactly? How is it like a float? How is it different? Let’s dive in and see what we can discover.

A very well written article by Joshua Johnson that dived into the pros and cons of using Inline-Block as a display property for layout. The most interesting is the The Alignment Issue discussion.