When to use Padding and Margin
Small details really matter.
When using applications, small details really make a big difference in User Experience (UX). These small details may include colors, font size, padding, margin, or anything style related.
Placing elements with the right amount of spacing makes a tremendous difference in UX. Today, we will learn about what paddings and margins are, and how we can utilize it to make applications more pleasing to use.
What are “Padding” and “Margin”?
Padding and margin are spacing properties, both used to style an element.
The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders.
The padding property defines the innermost portion of the layout, creating space around an element's content, inside of any defined margins and/or borders.
Padding
By default, Sketchware creates a padding of 8dp in every element — Linear Layout, TextView, Button, etc. You may have noticed that when you add any widget into a layout, there is a tiny bit of space between the widget and the layout. This is because the layout has a padding of 8.
Here are two layouts — one with 8 padding and one with 0 padding. You can clearly see the difference:
You may ask, “Why 8dp?”
That is a very good question! According to Google‘s Material Design Guideline, it is most appealing to the eye when a multiple of 8 is applied to paddings/margins. It doesn’t mean that you always have to follow these rules; however, it’s a good practice to follow these guidelines.
Padding can be applied in 4 directions: top, left, bottom, right. Here are examples that show all four. Note that the padding was applied ON the layout, not the TextView itself.
And finally, here is one with all-around padding:
Margin
Margin is a spacing around the widget. When you apply it to a widget, it may not look too different from padding. Look at two examples below:
It doesn’t look too different, right? I added a background color to make it easier to differentiate them:
This is the difference between padding and margin. Padding adds a spacing between the content and the border, while margin adds a spacing around the whole widget.
If I were to add an onClick event on both of them, the one with padding of 16 would have a higher chance of being clicked since it has a bigger surface area. This makes a great difference in User Experience.
When to use margin instead of padding is really up to you to decide. When you want to shift the content within the widget, use padding. However, when you want to move the widget without affecting the size of the widget, use margin.
Caution
There is one thing you should be careful when you’re using padding. If you apply too much padding when there is no more room for the layout to grow, it may delete some of the content. I’ve added background colors for easier visualization:
Applying the Concept in Sketchware.
In Sketchware, these properties can be found when you click on a widget to edit its properties:
Try it out on Sketchware yourself!
Conclusion
Today, we learned the concept of padding and margin. We learned how to modify its property to style an element. There are few things to remember from this article:
- According to Google‘s Material Design Guideline, it is most appealing to the eye when a multiple of 8 is applied to paddings/margins.
- When you want to shift the content within the widget, use padding. However, when you want to move the widget without affecting the size of the widget, use margin.
That’s it! Happy coding! :-)
