Margins and padding : overview and rules
This page is dedicated to explaining the basic rules around margins and padding in UI design. Margins and padding are two key concepts to master in order to achieve a clear and pleasing interface. The content below is based solely on my observations and personal experiences.
Definition
Margins are the white spaces or empty spaces that separate elements. In the case of UI design, we distinguish between “margin” and “padding” with CSS. As seen in the example below, the “margin,” represented in yellow, is the space outside the elements that “pushes” other components away from the outside. The “padding,” represented in purple, is the margins that create space within components by adding space around their content.
Why is it important to use margins?
By using appropriate margins, we enhance the readability of content by providing sufficient space between elements. Margins provide visual breathing room for users, making the interface clearer. They also help group elements together for a visual understanding of the page. The benefits of smart margin usage can be directly observed by looking at the example below.
The rules for good margins
Margins help define groups of elements, contributing to the visual organization of the interface. Margins allow for the creation of distinct groups, making navigation and understanding within the interface easier. As seen below, three colored groups are represented, with no visual hierarchy on the left, while each group is logically separated on the right. To visually create this hierarchy, elements can be grouped using “boxes” like Russian nesting dolls, as shown on the left in Figure 2. Once this hierarchy is established, the following rule is applied:
“The outer margins are larger than the inner margins”
or in other words:
“The deeper you go into subgroups, the smaller the margin become”
as show below :
To determine the size of margins, a system of proportionality using multiples of 8 pixels is employed. In this way, the spacing between elements follows a single and consistent logic, contributing to improved readability and homogeneity. To determine the size of margins, a system of proportionality using multiples of 8 pixels is employed. This approach ensures that element spacing follows a consistent logic, promoting improved readability and uniformity. We typically start with smaller margins, usually at 8 pixels, then progress to 16 pixels, 24 pixels, and so on.
Button’s padding rules
There are no fixed rules regarding padding use; it all depends on the style and aesthetic desired: some choose a larger padding to give lightness and breathability, while others prefer a narrower padding to optimize available space.
However, buttons can comply with certain padding rules/standards for their readability as CTAs (Call-to-Action). We write in a “horizontal” manner: words are longer than they are tall. So it’s preferable to comply with a “natural” rule of having more horizontal padding than vertical padding.
Generally, horizontal padding are around 2 to 3 times more than vertical padding. The benefits of this can be clearly seen in the example below.
(If the proportion is around 2 to 3 times, I personally prefer a ratio of x3)
Conclusion
The rule for margins :
The more you go deep into subgroups, the smaller the margins become.
The rule for the button’s padding :
Horizontal padding = between 2 and 3 times vertical padding