Questions
16 of 49
1What is the display property in CSS used for?
2What is the default display value for <div>, <span>, <p>, and <a> tags?
3What is the difference between display: block and display: inline?
4How does display: inline-block behave?
5What happens when you set display: none on an element?
6How is display: none different from visibility: hidden?
7Can display: none affect layout reflow or accessibility?
8What’s the effect of display: block on inline elements like <span>?
9What’s the difference between display: table and actual HTML <table> elements?
10How do replaced elements (like <img> or <input>) behave with different display values?
11How is display: flex different from display: block?
12What is the difference between display: grid and display: flex?
13What happens if you apply display: inline-flex to a container?
14What is the difference between display: contents and display: none?
15What is display: list-item, and when is it used?
16How does display: run-in work, and why is it rarely used?
17What’s the difference between display: inline-grid and display: grid?
18How can you make an element behave like both inline and block elements?
19What happens to child elements when the parent has display: contents?
20How does the display property affect box model calculations?
21How can you change a block-level element to behave like an inline element without changing its tag?
22How do you center elements using display: flex or display: grid?
23How can you hide elements but keep their layout space?
24What happens to child elements when their parent has display: none?
25How can display: contents help improve semantic markup but hurt accessibility?
26What happens if you set display: flex on the <body> tag?
27How do you use display to build responsive layouts?
28What is the difference between using display and position to arrange elements?
29How can you visually hide an element but keep it accessible for screen readers?
30How does display affect stacking and z-index behavior?
31Does display: none remove an element from the DOM?
32Can an element with display: none trigger CSS transitions or animations?
33How does display interact with CSS pseudo-elements (::before, ::after)?
34What is the difference between visibility: collapse and display: none in table elements?
35How can you make text and icons align properly using display values?
36How do block formatting contexts relate to display types?
37What happens if you apply display: table to a flex container?
38How does display behave differently for replaced vs. non-replaced elements?
39Can display be animated using CSS transitions?
40How does display affect the accessibility tree and ARIA roles?
41How can you make a <li> element appear horizontally instead of vertically?
42How do you create a two-column layout without using float or position, using only display?
43How do you make an image and text sit side by side neatly?
44How would you make a navigation menu horizontally aligned using display?
45How can you make all elements behave as border-box and block-level by default?
46How would you use display: flex to make a footer stick to the bottom?
47How can display: grid simplify responsive design compared to floats?
48When would you prefer display: inline-flex over display: flex?
49How can you use display: contents to remove extra wrappers in semantic HTML structures? How can incorrect use of display lead to accessibility or SEO problems?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
16 / 49

How does display: run-in work, and why is it rarely used?

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.

Key Characteristics
  1. 1

    A run-in element can appear at the beginning of the following block element's content, effectively 'running into' it.

  2. 2

    It can be styled like a block or inline element depending on its surrounding elements.

  3. 3

    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.

Example: Intended Usage of display: run-in

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.

Best Practices
  1. 1

    Avoid relying on display: run-in due to poor and inconsistent browser support.

  2. 2

    Use standard block or inline elements combined with CSS styling (e.g., inline headings or floated elements) for predictable layouts.

  3. 3

    Consider using Flexbox or Grid for complex heading/text arrangements instead.

Difficulty: 6/10
Topics: CSS display, layout, browser compatibility

Scenario Questions

0-2 years experience
  1. 1

    You're building a blog post component where the first heading should run into the first paragraph on wide screens but stack on mobile. You try display: run-in on the heading. What actually happens in Chrome vs Firefox today?

  2. 2

    A teammate used display: run-in on a label before an input. The label disappears in Safari. How would you debug this and what fallback would you use?

2-5 years experience
  1. 1

    We have a design where article meta (date, author) should inline with the first paragraph on desktop but be separate on mobile. The previous dev used display: run-in on the meta container. It works in Chrome but breaks in Firefox. Walk me through how you'd fix this without changing the HTML structure.

  2. 2

    You're reviewing a PR that uses display: run-in for a 'kicker' headline that should merge with the following h1. The reviewer flags browser support. What alternatives would you propose and how do you decide?

5-8 years experience
  1. 1

    Our design system has a 'run-in heading' pattern used across 50+ components. Browser support for display: run-in is flaky and the spec is deprecated. How would you refactor this pattern to be reliable, maintainable, and not break existing pages?

  2. 2

    A new designer wants 'run-in' behavior for a complex marketing component with dynamic content. The component must work in IE11 (legacy) and modern browsers. You can't change the CMS output HTML. How do you implement this robustly?

8+ years experience
  1. 1

    We're migrating a 10-year-old codebase off display: run-in because it's causing layout shifts in Chrome 100+. The pattern appears in 200+ templates across 5 teams. How do you plan the migration, coordinate with teams, and prevent regressions?

  2. 2

    The design org wants to standardize 'run-in' as a first-class pattern in our design system. Given the CSS spec history and browser reality, do you build a custom solution, use a polyfill, or push back? How do you justify the decision to leadership?

Follow-up Questions

  • ❓What browsers actually support run-in today?
  • ❓How would you polyfill this behavior?
  • ❓When would you ever choose run-in over flexbox?