Table of Contents
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 is the quiet architecture beneath every layout.
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.
Why Containment matters when working with AI
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.
Related concepts
- 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
