DEV Community

loading...

CSS even is not heaven

Julien Maury
Practice what you preach.
Originally published at blog.julien-maury.dev ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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

.btn {
    padding: .25em;
}
Enter fullscreen mode Exit fullscreen mode

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

.btn {
    padding: .25em .5em;
}
Enter fullscreen mode Exit fullscreen mode

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%
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

But something more like:

<button class="pady-2 padx-4" type="button">Click me</button>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)