teaching machines

Block vs. Inline-block vs. Inline

January 31, 2020 by . Filed under howto, public, www.

If I were to rank the most important things about making a website, I’d write down the following:

  1. The content
  2. The display property
  3. Everything else

The display property dictates how the content appears in relation to other content, and it silently cancels out other properties that don’t make sense for one its settings. I find understanding its behavior daunting, so I’m compiling a catalog of the differences between three common display settings: block, inline-block, and inline.

Here’s what I’ve come to understand so far:

property block inline-block inline
width defaults to fill parent defaults to fit content fits content
height defaults to fit content defaults to fit content fits content
margin all directions can be set all directions can be set only -left and -right can be set
padding all directions can be set all directions can be set -left and -right affect flow, -top and -bottom bleed
transform supported supported not supported
flow surrounded by linebreaks surrounded by linebreaks only if it overflows parent’s width not surrounded by linebreaks
overflow if height is fixed, content bleeds if height is fixed, content bleeds content wraps into next line of flow
wrapping between elements mandatory, as blocks do not appear on the same line elements in sequence do not bind to each other; if sequence overflows parent, breaks appear between elements elements in sequence and not separated by whitespace bind to each other; if sequence overflows parent, breaks only appear at whitespace

I’m including a little sample for experimenting with these settings. The blue square below is by default set to display as a block. Inspect the element and change its properties to see how they are influenced by display.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a dapibus purus. Donec ut purus at massa mattis porta. Nam varius eget mi sit amet maximus. Right-click on me, click Inspect, and change my properties. Fusce porta neque eu lacus dapibus dignissim. Aliquam sed sem nisl. Quisque bibendum posuere eleifend. Nulla ultricies tristique massa id vestibulum. Sed feugiat eros sit amet leo malesuada condimentum. Sed eleifend tortor augue.