The Dev Journey of a Wandering Anemone

Te Haerenga Kaihanga o he Hūmenga

Every HTML element has a default display value, the most important values being inline and block.

Block elements, like the paragraph you are currently reading, always start on a new line and spread left and right as far as they can, as demonstrated by the colored background.

Inline elements, such as this link pointing to a Sunburst anemone or this one leading you to one of my Australian siblings, never start a new line and only uses the minimum amount of width they need.

The CSS display property allows us to modify those defaults values. It helps controlling the layout of a website. Two of the possible values are inline and inline-block.

The inline value can turn a block element into an inline one.

The inline-block value is the alliance of both worlds. Like an inline element, it will not add a line break. From block elements, it will inherit the ability to be set to a specific width and height.