Catalog / Layout
Box model
catalog.
Every visible UI element is a box. Change the values and watch how content, padding, border, margin, and overflow alter the space an element actually occupies.
Content
268 x 160The drawable area inside padding and border.
Padding
24pxInternal comfort between content and edge.
Border
2pxThe visible edge around the padded content.
Margin
32pxOutside space that separates this box from neighbors.
Width lab
Change the box, then read the math
Content-box adds padding and border outside the declared width. Border-box keeps the declared width stable and shrinks the content area instead.
Read box sizingSpacing
Gap aligns siblings; margin belongs to one box
Gap is owned by the parent layout, so all children stay even.
Overflow
What happens when content does not fit?
Overflow is not just CSS cleanup. It decides whether hidden content is accessible, clipped, or visually noisy.
Practical rule
Pick the spacing job first
If the space belongs inside the component, use padding. If it separates neighboring elements, use margin or parent-owned gap. If it marks the edge, use border.