Having a difficult time understand sizes and which units to use
I really struggle with what values to put on the padding property? Also I don't know when I should use rems or pixels.
I guess this comes from coding instructors online just throwing out numbers without explaining why. Any tips?
3 Replies
I like to use ems for padding/margin/gap so if the font size changes (as mine does because I use clamp for the font-sizing) the spacing is still relative.
Otherwise if I have a font size of 2rem and padding in 1rem/16px and the font size foes down to 1rem, I now have to adjust the padding.
KP has quite a lot of videos on units.
https://youtu.be/ZjiJIIL60GI?si=PcWPbGekG97UC3_M
https://youtu.be/_-aDOAMmDHI?si=4deqs0ze7bvrvs1k
https://youtu.be/N5wpD9Ov_To?si=pEAAMmTZsxmCx2S9
https://youtu.be/Utc_uhvTluk?si=t0MjVo0lcreK26zH
https://youtu.be/IWFqGsXxJ1E?si=0Ck5TILnFOjsN4xE
Kevin Powell
YouTube
em vs rem - css units | #shorts
Longer video: https://youtu.be/_-aDOAMmDHI
Code from this video: https://codepen.io/kevinpowell/pen/XWJBbRy
#css
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twit...
Kevin Powell
YouTube
CSS em and rem explained #CSS #responsive
A look at the CSS units EM and REM, how they work and when you might want to use one over the other!
First I take a look at some basic examples of both ems and rems, then move onto some more interesting things with buttons and a call to action, as well how we can take advantage of both the em and rem with media queries.
The way the em unit is ...
Kevin Powell
YouTube
Are you using the right CSS units?
There are a lot of different units that we can use when writing CSS, in this video I give some general rules of thumb of which ones are best suited for which situations.
Zell's article on media queries: https://zellwk.com/blog/media-query-units/
Em vs. Rem: https://youtu.be/_-aDOAMmDHI
Using clamp() for fonts: https://youtu.be/U9VF-4euyRo
The ...
Kevin Powell
YouTube
This flowchart will help you pick the right CSS unit
The flowchart 👉 https://whatunit.com/
There are a lot of CSS length units to pick from—54 to be exact!—which can make it hard to know which one you should use. Luckily, there are only a handful that you’ll use most of the time, but it can still be hard to know what’s best, so I’ve made a flowchart to help you decide!
🔗 Links
✅ More on clamp() ...
Kevin Powell
YouTube
CSS Units: vh, vw, vmin, vmax #css #responsive #design
A look at the viewport CSS units vw, vh, vmin and vmax. Not only do I look at how they work for layout purposes, but how they can be really useful for setting type as well!
My Codepen: http://codepen.io/kevinpowell/pen/QdRyKe
---
Music by Chillhop: http://youtube.com/chillhopdotcom
L'Indécis - Happy Hours: https://soundcloud.com/lindecis
If ...
As for rems vs pixels use rems. Pixels for font-sizes is not accessible. I only use pixels for things like borders. My loose rule is if it's under 0.5rem(8px) I use pixels. Like for declaring a 1px border, I use pixels vs 0.0625rem or 2px vs 0.125rem.
Ok thank you! I will check out those videos in the morning!