display: contents

"display: contents" allows you to control the box generation of an element. The element with "display: contents" won't generate any box, but its children and pseudo-elements will still do it as normal. It's like the element has been replaced by its children and pseudo-elements.

Demo

• https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/

Specification

Working draft or equivalent

Status in Chromium

Blink components: Blink

In development (launch bug)

Consensus & Standardization

• Firefox: Shipped
• Edge: No public signals
• Safari: Public support
• Web Developers: Positive

Owner

• ecobos@igalia.com

Last updated on 2017-06-14