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.