Archive - CSS isn't magic

May 2025

We don't need to use 0 anymore to define margins and paddings

I had to make a not logical thing, i.e.

May 28 •

Please, support CSS isn't magic. Get a paid subscription for $6

May 24 •

position: absolute frees us from using display: block

Are you used to defining display: block for ::before or ::after?

May 21 •

justify-content: center and align-items: center leads to loss of elements

May 14 •

Please, support CSS isn't magic. Get a paid subscription for $6

May 10 •

The gap property smashes margins!

Stop, stop, stop defining margins to set the gap between a few elements.

May 7 •

April 2025

Let's reduce the combination of the width and max-width properties to one

The min() function allows us to define values, and browsers will choose the smallest value from them.

Apr 30 •

Please, support CSS isn't magic. Get a paid subscription for $6

Apr 26 •

Reduce top: 0; right: 0; bottom: 0; left: 0 to one line!

Did you use the top, right, bottom and left properties to stretch elements over the full width and height of the parent?

Apr 23 •

When is using display: block for ::before or ::after unnecessary?

Folks, did you define display: flex or display: inline-flex to the parent?

Apr 16 •

#nojs-banner { position: fixed; bottom: 0; left: 0; padding: 16px 16px 16px 32px; width: 100%; box-sizing: border-box; background: red; color: white; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 13px; line-height: 13px; } #nojs-banner a { color: inherit; text-decoration: underline; } This site requires JavaScript to run correctly. Please turn on JavaScript or unblock scripts