When should I use em and %?
After reading about the topic and watching some videos from Kevin, I think I should use em for margins and paddings. I'm using % for input widths to make them responsive, but I'm not sure if that's the best approach.
Do you have some real-world examples of when to use em and %?
6 Replies
In my opinion,
em should be used for padding and margin since larger font sizes need more maring/padding than smaller ones. So you keep the margin/padding to be based on the current font size (em).
% is a bit tricky, as there's no real litmus test like for em and rem. Instead, I tend to use it only on max-width: 100%; for images so they don't get any bigger than their intrinsic size.
As for responsiveness, don't use percentage as that can make things too small for mobile users. Instead, set a max width and make sure there's enough margin to prevent the elements from being too squished.
As an example for text-based elements:
This makes the container element no larger than 60ch (a good starting point for text line length) but no smaller than 4em shy of full width. That means that regardless of the viewport there will be—at minimum—2em of padding on each side.Ok, we have the same thinking about em, thank you for clarifying it. Now, about % in inputs, as you said, I should use max-width. For example:
Is this correct? And thank you again for answering my question.
Yes, because input elements are replaced elements, you need to either set both like you did or do a
width: min() like I showed above.
Although, especially for text inputs, I would use ch as the width instead of pixels. ch is the "character width", or the size of 0 in the current font family. It's a good enough representation of the width of one character for our purposes. The big issue with pixels here (and in most other places) is that it doesn't care what the font size or family is, doesn't care about zoom level, and is the opposite of responsive.
What if the person using your website is visually impaired and sets their default font size to 20px (instead of the default 16px)? Your width just dropped from 37.5em to 30em. For a one-line text input that might not be as big a deal, but what about multi-line inputs? Or non-input, text-based elements? My best advice is to only use pixels for image sizes and visual flourishes—border radius, border size, text decorations, etc.I don't even know what to say. You've helped me so much
thank you!
A simple "👍" would suffice 😉
I like to defer to EMs for margins/padding/gaps ie spacing so the ratio stays the same as the clamp grows and shrinks the font size.