CSS even is not heaven

You must be careful when trying to make things symmetric in CSS. It’s not the best idea, and here is why.

The perception of paddings

The human eye is quite complex but not so sophisticated. You must avoid absolute symmetry in CSS.

While it’s tempting to make paddings and margins always even in CSS, the eye finds it ugly and paradoxically not centered.

For example, a button like the following:

<button class="btn" type="button">Click me</button>

If you try to add the same padding in all directions (top, right, bottom, left):

.btn {
    padding: .25em;
}

It won’t look pretty. Instead, write something like this:

.btn {
    padding: .25em .5em;
}

Right and left paddings must be higher than top and bottom paddings. It’s not uncommon to double the value for horizontal paddings.

The perception of shapes

Shapes are everywhere in modern CSS. Whether you use border-radius or clip-path or any transforms, it makes your website a little spicier.

However, again, the human eye does not perceive it the way you think. As far as I know, rounded shapes always look tinier than squared shapes.

You can test that with an img. If you apply the following rule:

.avatar {
    border-radius: 50%
}

The image seems to shrink, even if it’s not the case. It might seem obvious, but it’s easy to forget that when styling.

CSS frameworks won’t save you

Whether you use Bootstrap, Tailwind or any tool that relies on specific and generic classes to apply margins and paddings on HTML elements, ensure you apply the rules we saw in the last sections.

Don’t do this:

<button class="pad-4" type="button">Click me</button>

But something more like:

<button class="pady-2 padx-4" type="button">Click me</button>

Where padx would be for horitontal padding and pady for vertical padding.

Conclusion

It’s a known “problem,” but it’s not something you learn everywhere, and it’s essential to be extra cautious with concepts such as “even” and “symmetry” in CSS.

Your eye is more important than equal distances.