CSS Containment

— how elements hold, limit,
and shape the space
their children live in

Containment is the idea that
every element creates a space of responsibility.
A parent defines the boundaries within which
its children flow, align, and express themselves.

Containment tells us:

• a parent sets the limits of its children
• children cannot escape those limits unless we explicitly allow it
• spacing, alignment, and flow all happen inside this container
• the container’s size, padding, and rules shape how its children behave
• changing the container often changes the entire layout

Containment may seem to be about control
but it is actually about context.
When we understand it,
we can describe layout intentions with precision.

Examples of what to say:

“Keep this element inside its container.”

“Let the container grow with its content.”

“Do not let this child escape the parent’s boundaries.”

“Respect the container’s padding.”

Containment is the mental model that
makes structure predictable.

AI needs to know where the work happens.

When we name the container,
we are defining the scope:

• the space
• the relationships
• the constraints
• the visual rhythm

Containment is how we prevent
unintended rewrites and keep changes safe.

• Flow — how children move inside the container
• Parent / Child — the structure that creates containment
• Spacing — the interior breathing room of the container
• Alignment — how children position themselves within the container

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←