I’ve heard that one should use spacing consistently, but I’m stuck on what to do here. I have the following box:
The padding above and below the five circles is not equal. Would it be more pleasing to add equal padding on both ends?
In the first image, I’m respecting the padding of the white box as a whole, making sure the content lines up against it. In the second image, I try to create more balance around the components above/below the gray line.
What’s the more user-friendly way of going about this?
Answer
I would look at the overall container, not only the sides of the bullet’s section.
As I see it, the spaces related are the top and bottom of the container (orange)
And the spaces around the “hr” line. It is not carved in stone. You could change the relationship between the two sides of the line (magenta)
Another option is that you relate the space above Grammar, to the next series of spaces (green)
Attribution
Source : Link , Question Author : Community , Answer Author : Rafael