<?xml version="1.0" encoding="utf-8"?>

Paddings

Paddings

While margins are external, paddings are internal. Padding is the space within an element’s bounds, starting with the border and extending to the next inner element. For example, if a button is a component, the spacing between the button’s label and the edge of the button is the padding.

Virtually every element has padding. This prevents insufficient space in responsive designs when viewed on smaller screens.

Pro Tip: Always set minimum paddings for elements — we recommend no less than 12px.

Improve your UX & Product skills with interactive courses that actually work