Rudiments
Boxes
Everything in web design is a box, or the absence of a box.
As Rachel Andrew has reminded us, everything in web design is a box, or the absence of a box. Not everything looks like a box — border-radius, clip-path, and transforms can be deceptive — but everything takes up a box-like space. Layout is, therefore, the arrangement of boxes.
The box model
The box model comprises content, padding, border, and margin. CSS lets us alter these values to change the overall size and shape of elements’ display.
*, *::before, *::after {
box-sizing: border-box;
}display
Block elements assume all available inline space. Inline elements are only as wide as their content. Thinking typographically: block elements are like paragraphs; inline elements are like words.
Logical properties
Physical properties like margin-left break in RTL contexts. Logical properties work in any writing direction:
/* Physical — breaks in rtl */
.icon { margin-right: 0.5em; }
/* Logical — writing-mode aware */
.icon { margin-inline-end: 0.5em; }Formatting contexts
Applying display: flex or display: grid creates a new formatting context for children. The element itself still behaves as a block externally. Formatting contexts are the basis of all the layouts that follow.
CSS as suggestion
Instead of dictating exact positions, write CSS that suggests constraints and lets the browser calculate the result. This is the heart of algorithmic, intrinsically responsive layout.