# Align to one edge and keep it

UI Tip #006 · Layout & spacing · 2026-10-12 · https://ui.praveenjuge.com/6/align-to-one-edge

> Every new alignment line adds noise. Pick one edge for a block of content, usually the left, and hang the text, inputs and buttons from it.

*Figure: A card whose heading, text, input and button slide from five different left edges onto one shared edge.*

## Why it matters

Every edge on a screen draws an invisible line, and the eye notices each one. A card where the heading, the text, the input and the button all start a few pixels apart has five lines where it needs one. It looks unsettled even when nobody can say why, and it is slower to scan, because each row starts somewhere new.

## How to do it

- Choose one edge for a block of content, usually the left in a left-to-right language, and hang everything from it.
- Get the edge from the container's padding, not from nudging each element.
- Watch the usual offenders: icons placed before a heading, inputs with their own margin, buttons centred under left-aligned text.
- Decide how text inside a field lines up with the text above it, its border or its text, and do it the same way everywhere.
- Left-align body text and let the right side stay ragged. Centred text makes every line start in a different place.

## When it bends

Right-align numbers in tables, so their digits line up. Centre short things that stand alone, like an empty state or a single call to action. These are new edges you choose, not drift.

## Sources

- [Principles of Visual Design, Nielsen Norman Group](https://www.nngroup.com/articles/principles-visual-design/)

---

From [UI Tips by Praveen Juge](https://ui.praveenjuge.com). Free to share, with a link back to https://ui.praveenjuge.com/6/align-to-one-edge.