Understanding display: run-in in CSS
display: run-in is a CSS display value intended to make an element behave like a block or inline element depending on its context. If followed by a block-level element, the run-in element behaves as inline; otherwise, it behaves as a block.
A
run-inelement can appear at the beginning of the following block element's content, effectively 'running into' it.It can be styled like a block or inline element depending on its surrounding elements.
It is intended to reduce the need for extra markup for headings or introductory text.
Despite its intended behavior, display: run-in is rarely used because support across browsers is inconsistent. Most modern browsers do not reliably implement it, and its behavior can be confusing.
In this example, the <h2> is supposed to run into the paragraph, making the heading appear inline with the first line of text. However, many browsers will render it as a block, ignoring the run-in behavior.
Avoid relying on
display: run-indue to poor and inconsistent browser support.Use standard block or inline elements combined with CSS styling (e.g., inline headings or floated elements) for predictable layouts.
Consider using Flexbox or Grid for complex heading/text arrangements instead.