px vs em/rem padding
Hey, i recently found out that using
px for padding isn't necessarily a negative thing, especially if you don't want it to scale with text size. I also heard it shouldn't cause overflow but have found out otherwise, unless i'm doing something wrong? The first image is using em, the second is using px, and as you can see, the px causes the text to overflow. if i reduce the px value it somewhat fixes it however even if the value is larger i don't believe it should overflow?
I'd appreciate any insight since i'd like to be able to get out of using em/rem for a lot of things haha. Thanks in advance.
https://codepen.io/deerCabin/pen/mdNpbjZ
71 Replies
The px isn't causing the overflow. It is simply the length of the longest "words".
60px is a lot more than 1em so you can't really compare.
By default the browser won't break up the words so it has no choice but to overflow outside if it's container.
oh right i see, thanks
You’re giving everything padding of 5px on the * selector, anything that doesn’t get its padding inline overwritten is automatically adding 10px. so for the html and body combined you have 20px of inline space .
Your padding/—gap value is 60px. Your width on the wrapper for smaller screens is 100% - 60px * 2 which has to also include the padding-inline of 5px*2; then you have padding of 60px * 2 on the container and 10px on the <p>.
So if the screen size is 320px, subtract the padding on the html and body 320-20px=300px, the wrapper width is then 300-120=280px; so container has 280px to live in which has to include the 10px of padding.
Subtract the inline padding on the container from there that is set with the —gap custom property. 280-10-120= 150px
Then you have the paragraph element which has to fit in there as well as it’s 10px of padding. That gives the paragraph 140px width to live in which is not enough for even the longest word
oh okay that makes sense, i appreciate the explanation
I’m a proponent of using em and clamp so padding scales with the element though; I only use a pixel unit for things like border width , text-decoration-thickness , letter spacing , anything that has to be a couple pixels. But have started using em for those too
yeah that's fair. I was having a chat with b1 and he pointed out that increasing the browser font size can make em paddings on things like buttons too big eventually.
Using em always keeps it the same relative to the font size . If the font size is 1rem and the padding-inline is 1.5em , then it will always be 1.5x the font size. If your clamp brings the font-size down to 0.75rem, the padding will be 0.751.5=1.125rem. If the font size is 2rem, the padding will 21.5=3rem.
But if you set padding in pixels , say 20px, if the font is too small the padding will look enormous;if the font is big the padding will look small. So you’d have the same problem with pixels.
Anyone that’s increasing the base body font size that much via the user agent styles is not worried about the aesthetics of the page, they’re used to things getting wonky and they just want to read the content. At least with ems, paddings will still be balanced the way you intended.
Everyone has their preferences, there’s no harm in setting with pixels you just can’t keep it balanced at different screen sizes without resetting padding on everything anytime you reset the font size. You could use custom properties to make this easier but this is what EM does best so it’s a great tool for that use case. I get ocd about efficiency so if there’s something that helps me write more DRY-ly, less lines in the file and increases efficiency (another example being clamp) I prefer to use it. Other people prefer to change their font sizes manually in a few media queries, at which point you could adjust all your paddings or the custom property you set for it
Just personal preference on which tools one chooses to utilize for this particular scenario
yeah that makes sense, i see, thank you
My point is once you get to a point the big font + big padding is bad and just makes harder to read because its now squished in the container.
#justTestIt
I'm not a big fan of using just REM/EM in clamps either
mix of both px + magic vw + rem (or the reverse)
#alwaysDepends
Mobile its a massive issue btw (but most people don't realize it until they use a bigger font xD)
Also because I have no clout I use this https://ashleemboyer.com/blog/why-you-should-use-px-units-for-margin-padding-and-other-spacing-techniques for reference xD
Why You Should Use px Units for margin, padding, & Other Spacing Te...
When users increase their text size, they're not trying to make the space around text bigger.
I'd love to see some of your examples for those clamp/padding cases though* cleverMissFox 😄
Always willing to learn a new thing or change my mind.
I get your point and I agree, it can get to a big bad ugly point . I just prefer to use em. Same is true with small.
What kind of examples do you mean? A clamp and padding in em ?
Well yea just in general cause I've read you say this before so figured you had something I could test.
I know you use clamp a lot for different box-model stuff
So you don't have to media query or something aswell*?
Sure most of my codepen uses clamp and padding in ems, although I've changed my Approach I used to put the clamp on the HTML and I don't anymore. I'll use media queries or container queries when needed but I don't often find myself needing to change the font size or the padding of anything
❤️ your one follow is one my fav devs
I find the ems approach most attractive to my designer side to keep everything scaling at the same rate, up or down. I get kind of OCD about it sometimes
I have another code pen that I believe I have more follows on that's more of a test account than actual finished anything haha but now I have to see who you're talking about
Oh my God Cassie evans! She is such an SVG Queen!!!!
Yea I could see that, its not something I get to obsessed about. I'm also never really designing that strict outside set sizes in the system and I don't want those to change. I've never had a case where I used pixels for padding and went.. damn that should have been rem though either 😂 so its like I just test, usually when I'm doing squish tests for responsiveness.
I'm one those "pixels perfect is a lie" when it comes to the web too though
Building to expand and contract most of the time so xD
No for sure, I agree pixel perfect is pretty unobtainable even in design. Everything can be perfectly centered but visually the glyphs don't LOOK centered. I've had to give up on that dream.
Idk why but outside xtra large titles I font the font changing size when it gets smaller is a no for me most times too
I do despise getting the layout responsive and having to have a media query just for font size though. Clamp and min are some of my faves.
Yea but that is more exact
I'm that person lol
I can understand that too
But I don't need to do it often its mostly headings I don't change <p> ever really ... Also if you look at design systems having concise in font size is like top of the list. So having odd sizes not based on the system to me is worse
magic numbery turns me off big time too xD
This goes to show though its really #itDepends cause I def see your side too looking at the work you do its very persice to a set size/design.
Having it look the same at scale makes sense in that regards
You gotta make sure everything scales though... or it breaks the illusion
that toggle screams at me... I've been forgotten
I haven't found the perfect clamp system yet that I love the rates for all sizes. Luckily most static designs for non-motion graphics don't have to grow or shrink so you can find the perfect typeface and size
Also the alignment changes for the + but I think thats not rem issues xD
Hahaha oh nooo!!! Idk what happened there I remember I was experimenting. This one is about a year old so don't judge me too harshly I just started last Sept
And the skewed border I remember doesn't scroll well
nanan I respect your stuff no judgment, trying to learn your pov
I just clicked the ones I saw clamps in
xD
not a fan of the 62.5% trick either >.>;;
I did start off with the 62.5% too which I thiught was sooo magical . Didn't realize
Yea its dangerous*
Yep exactly. It was a bad habit I have since broken
Ok not getting off topic like the works, I know my opinion is not a popular one 😄 I def need to use more calc/clamps in my grids so trying to learn.
I have a friend that scales stuff on his 4k with larger(24px) font and still zooms like 120% 🤣 He was the first person that was like hey B this don't look good. Since then I've been trying to pay attention to what I want to work with fontsize/viewports
It's easy to get in a habit too, I just happened to start learning woth clamp , I wouldn't be surprised if something changed and I didn't adopt it . Just because it's new and fancy it doesn't always mean best and if it ain't broke.
Clamp scares me a little I think cause most people use them with rem and magic vw xD
And tbh I don't test up to 24px AND 120 zoom
So I'm like uhhhhhh I can set one media query and change that H1 for mobile 😂
And this is my main point people need to test and not just think REM/EM for everything is a good idea
Wait, Rem and vw in the clamp, why is that not good or why scary
My point about clamp too like if you use REM only for largest fonts and find that sweet formula you like on that clamp maker.... but don't up your font size to test? 😄
danger zone ... that is what happen to me
well one of the things
cause my heading was then overflowing cause user changed the font
😉
I've never tested both 24px body font AND 120% zoom tbh. One or the other but never both
oh no thats just him my buddy and his giant monitor xD
The issue would happen without zoom or not
Zoom actually works better than rem 😦
from a user standpoint imo (rare do I see things break on zoom cause it hits media queries)
Most users that set fontsize are not doing it in the browser though (like him) its a OS setting
So they are increasing font in OS (browsers use it) and then is zooming websites.
this is up to 24px body font and i dont think it looks terrible. normal vs 24px
Right but it wouldn't look bad as px either
o wait right one is px?
Sorry I thought they sent in order. Large one/left is 24px, right is clamped
I gotta full screen these discord distorts stuff
🤔 yea idk this does not win me over any 😂
I wish I could find this other post it had lots of nice examples
Hahaha I was just quelling my own worries that I wasnt testing zoom and large fonts
So I know sighted users will go 32px or up to where they need, I know its not the average either but I've been atleast doing 32px
clamp, 24px, 32px
So my thing is you fit more in a smaller space too 😄
24px isn't bad 32px def gets tight
but that is also from a max-height?
What were you saying about not using rem and viewport in clamp ?
not viewport but using only REM values in the clamp calc
having a min/max pixel value it can't grow over
You don't need to respect the user font size that much
<p> is honestly the only one that really matter imo
but we won't get that spicy in this thread
That is only an issue when you are doing large fonts/designs
Like my folio xD
I am not opposed to using pixel in the clamp just never came across a pattern that does so. Will it still zoom when it's at a min/max if it's px only ?
I've seen some those breaking because root font size grows them past the magic number
if that makes sense
mmm good question. But again zoom triggers breakpoints
I need to test that though good question. Zooms odd...
like how it treats vw/vh is odd
I guess that would be the one time I would use vw for font-size too is large screen filling fonts
cause zoom wouldn't effect it either xD
oh that feels so wrong but it sounds right (time for 🧑🔬 )
Gosh typography
right?!? (I'm terrible at it so take my opinions lightly LOL)
I know you're not terrible 😆
I'm good at derailing threads xD
can you figure out why the <a> and <button> with the same class applied to both, pretty much all the same styles and a display of block,; the button automatically centers the icon and the <a> doesnt? its not text-align: center but i cant find what the difference is between the <a> and the <button>
https://codepen.io/Miss-Fox/pen/abeEmmO?editors=1100
text-align center?
yea that
been there 😂
sorry, i kept testing that and it wasnt wworking but then it did. but it doesnt vertically align in the <a>
is that just vertical align?
horizontal? idk axis confuse me
Idj why it's not working vertical-align middle but text align center wasn't working either .
No worries just thought I'd check since you were on
I make them .btn utils grid xD
For sure ill prob do so, it's just triggering my ocd that I can't figure out which property is missing from <a> to make them match 😆
An interesting thread to follow 👍
Re the button vertical centering it is probably due to the intrinsic button styling which is automatically centering it vertically.
https://html.spec.whatwg.org/multipage/rendering.html#button-layout
If the element is an input element, or if it is a button element and its computed value for 'display' is not 'inline-grid', 'grid', 'inline-flex', or 'flex', then the element's box has a child anonymous button content box with the following behaviors: The box is a block-level block container that establishes a new block formatting context (i.e., 'display' is 'flow-root'). If the box does not overflow in the horizontal axis, then it is centered horizontally. If the box does not overflow in the vertical axis, then it is centered vertically.
Chris! Amazing find!!! I did set both the link and the button to display block but couldn’t figure out what property was missing from the link to make it center vertically too.
My brain is absolutely fried today 😵💫 but will read through this tomorrow and see what I can figure out to make them look the same ✨ you’re the best
you can fix this with
overflow-wrap: break-word
its from josh comeau's css reset aswellI just took a look at this to see what I had broken along the way but I dont see this.
Do you happen to remember which browser /oS you used on this screenshot ? This is the pen in case that's helpful. And is it only the first toggle that's shrunken or is it all of them?
