This CSS rule, although seemingly straightforward, has quite a few edge cases and specific behaviours to take note of. Visually speaking, the above result is exactly the same as what we would expect if the markup was written without the opening and closing tags of the outer element. outer element, this is how it is displayed. However, if we add display: contents to the. Typically, this is how we would expect the elements to be drawn on the page. Let's take, for example, the following markup. In the specification, it states -įor the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents The easiest way to understand what happens when display: contents is used is to imagine the element’s opening and closing tags being omitted from the markup. What happens when you use display: contents? The newly specced contents value, on the other hand, will result in the contents of the box being drawn as normal, but the surrounding box being omitted entirely. The none value will result in neither the box or its contents being drawn on the page. There are only two values for the display property which control whether an element defined in the markup will generate a box at all. We can even trick the box into behaving like a table with table. We can have the box be placed within its siblings like text with inline. With the CSS display property, we can control different things about how this box and its children are drawn on the page. Second, we have the contents of the box the content area. First we have the actual box, which consists of the border, padding, and margin areas. Broadly speaking, this 'rectangular box' consists of two sections. As I frequently mention, every element in the document tree is a rectangular box.

Sidplay amazon fire