2

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?

Improve this question
2
  • As this post is migrated from UX, I am guessing you need an HTML+CSS response.
    – Rafael
    Commented Sep 28, 2021 at 11:07
  • 2
    There's no hard rules about this sort of thing. Come up with some standard rules for white space, see how it looks, and adjust as you see fit. Standardization of white space is a rule of thumb mostly across components and pages.
    – Zach Saucier
    Commented Sep 28, 2021 at 12:18

1 Answer 1

Reset to default
3

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.