samepadding

Samepadding is a term used in user interface design to describe the practice of applying identical padding around the content of a rectangular element. It yields uniform whitespace on all sides, contributing to visual balance and predictable alignment.

In web design, the effect is typically implemented with CSS padding. A single value, such as padding: 8px;, assigns the same padding to the top, right, bottom, and left. More explicit forms include padding: 8px 8px 8px 8px;, and the longhand padding-top, padding-right, padding-bottom, padding-left: 8px;. Units can be px, em, rem, or percent, and can vary with responsive design. The result also depends on the CSS box model; with box-sizing: content-box (the default), padding increases the element’s outer size, while with border-box, padding is included within the declared width and height.

Uses and considerations: Samepadding is common in card components, buttons, dialogs, and navigation items where consistent whitespace aids readability and tap targets. Designers must consider accessibility and tactile affordances; as padding scales with font size or device, ensuring minimum touch targets remains important. When used with responsive layouts, padding values may be expressed in relative units to preserve proportional spacing across breakpoints.

In design systems and CSS utilities, samepadding is often encoded as a spacing token or utility that applies a uniform value across sides. Examples include design tokens named padding or space, and utility classes that map to a fixed scale.

See also: padding; symmetric padding; box model; design tokens; spacing scales.