The value run-in of the CSS display property turns a box into the first inline box of the element that follows it. This value is currently well-supported in Chrome, Safari and Opera. Using this value on headings followed by paragraphs turns out to be very useful when we want to create the effect of an heading contained in the very first line of a paragraph.
CSS specifications say that
this value creates either block or inline boxes, depending on context. Properties apply to run-in boxes based on their final status (inline-level or block-level).. Let's see an example. Given the following HTML structure:
<h2>...</h2> <p>...</p>
we can write the following CSS rule:
h2 {
font: normal 1.5em Georgia, serif;
color: #454545;
margin: 0 5px 5px 0;
display: run-in;
padding: 1px 1em;
background: #ffc;
border: 1px solid #999;
border-radius: 6px;
}
The result is shown below.
In this case, this value creates an inline box put on the very first line of the next paragraph. This is exactly the effect we wanted to achieve.