How to know what padding to stay consistent with?

I’ve heard that one should use spacing consistently, but I’m stuck on what to do here. I have the following box:

enter image description here

The padding above and below the five circles is not equal. Would it be more pleasing to add equal padding on both ends?

enter image description here

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?


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)

enter image description here

Another option is that you relate the space above Grammar, to the next series of spaces (green)

enter image description here

Source : Link , Question Author : Community , Answer Author : Rafael

Leave a Comment