The rendering pipeline
The render tree
Distinguish the document tree from the boxes that participate in visual rendering.
8 minute lesson
The DOM describes document nodes. Rendering needs the styled boxes and visual content that can appear on screen.
Not every DOM node creates a box. An element with display: none remains in the DOM but does not participate in layout or paint.
The reverse is also possible. ::before and ::after can create visual content without separate DOM nodes.
You will often hear render tree used as the conceptual combination of document content and computed styles. Browser engines use several internal structures, so do not depend on one literal universal tree implementation.
Visibility also matters differently. visibility: hidden keeps an element’s layout space but skips its visible painting. display: none removes its box from layout.
Use the Elements panel to toggle both properties. Watch neighboring boxes move for display: none but keep their positions for visibility: hidden.
Exercise: predict whether a hidden element affects layout, paint, both, or neither for each property.
Lesson completed