Uneven Inline Paddings

Published on:

November 10, 2025

Categories:

Design³, Typography⁸, CSS⁸²

Current music:

COVET —

Ares

Current drink:

Green tea with bergamot, kiwi, yellow peach, orange blossom and violet flower

Today, I want to share one tiny design tweak you can do to your content styles. I have used it in my blog’s design for a while, and recently decided to improve it a bit, and will take this as an opportunity to share it.

The Ragged Edge

No, this is not about Babylon 5’s 100^th episode that had “The Ragged Edge” as its title, in which Garibaldi’s relapse into alcoholism jeopardises a covert mission to the Drazi homeworld (quoting Wikipedia’s episode summary that I found when doing some research; good show, BTW).

I will be talking about the left-aligned text, also known as “flush left” or “ragged right”. Actually, this could also work for right-aligned text — the main idea is that we need to have the rag, and not have the text justified.

The problem with the ragged edge — if the padding on both sides of your column of content is even, it will get perceived as uneven.

.container {
	padding: 32px;
}

Very rarely any of the words in the text will get flush with its right edge: usually, they will wrap before reaching it, and thus will always leave some extra space.

In the above example, by default, all the padding around the paragraph is shown with a green background, excluding the background under the actual text content. This makes it easy to spot the unevenness: removing the background “hides” this, but only to an extent.

The Solution

The solution for this is to apply a smaller padding to the ragged edge:

.uneven-padding {
	padding-inline-end: 16px;
}

This might not look that impactful on a minimal example, but the more text you have, the bigger the change. This can be even more important for narrow contexts: on my blog I initially only applied this in the desktop version, but on smaller screens the padding ended up being equal.

Downsides

Should you go and change all your paddings? Probably not. Especially, given there might be potential issues with this solution:

1. You could think that the bigger the padding, the bigger chunk of it we could remove. To an extent, this is true, but it can be very easy to shift the unevenness in the other direction. This is something that should be done “by an eye”, although as a rule of thumb a good starting point could be to apply a half of the original padding.

2. Often, people include things other than the text in their content. Images, code blocks, etc. If those have backgrounds or borders on their own, an uneven padding around those elements will look uneven. This is where you’d want to either add an extra margin to those elements to compensate, or invert things and keep the original even padding intact and only add a negative margin on the children that might need it like paragraphs, list items, and so on.

3. After addressing the problem with the full-width elements above, and if the padding is pretty large, then cutting it in half can lead to the unevenness being pretty obvious. These pronounced blocky elements will visually reinforce the “expected” edge, making the “hanging” text in the rag stick out.

4. If your text has text-wrap: balance or pretty, the effect of the fix will often be smaller because then all the lines will wrap sooner, so the chances of the text not going until the edge will be higher, and a small padding tweak won’t help. And if the width of the container will be equal to the longest wrapping lines, it is likely things could feel unbalanced, similar to if we had text-align: justify.

Closing Thoughts

I hope you found this short post interesting. I consider myself bad at design, but many people tell me that they like how my main website and this blog look. Blame all the years that I iterated on them!

Over these years, gradually, I implemented more and more ideas, small and big, regarding their design and typography. Did you spot some already? Or are they subtle enough that you’re now wondering what exactly do I mean? Let me know in the comments down below.