CSS

Box Model

Definition

Every HTML element is a rectangular box consisting of content, padding, border, and margin. `box-sizing: border-box` makes width/height include padding and border, which simplifies layout calculations.

Code Example

Css

Learn More

Css tutorials

Related Terms

Flexbox

A CSS layout model for one-dimensional arrangements (row or column). Flexbox distributes space among items and handles alignment, even when sizes are dynamic. Set display: flex on the container and control children with properties like justify-content, align-items, and flex-grow.

CSS Grid

A CSS layout model for two-dimensional layouts with rows and columns. Grid gives precise control over placement and sizing of elements. More powerful than Flexbox for complex page layouts.