Can I remove these Empty Spaces somehow? Text-box-trim is not yet supported :(
Is there any way to remove this empty space so i can calculate properly the padding and everything else?
16 Replies
which empty space?
and where can we see this live?
https://discord.com/channels/436251713830125568/1437501286630293565/1437501286630293565
the space below and above the text
One second, uploading it
@ἔρωςhttps://codepen.io/NotNegative/pen/vEGBqaR
given it's not supported in Firefox (and in your example, turning it on in Chrome just increase the spacing), I'd say no
but if you know the font that'll be used, you can calculate it manually and magic-number it
especially if it's always all-caps
also, which padding do you need to calculate?
You could probably use this tool
https://text-crop.eightshapes.com/ that should work
Btw, just keep in mind, it requires SCSS... But you can write it in codepen then compile to CSS then add it to your CSS ^^
Uhm, i'll check this out, thanks a lot!
I wanted the distance between "designing automations..." and "NAME SURNAME" to be the exact same distance that there is between "NAME SURNAME" and the SVG icon.
Would wrapping the name-surname inside a separated div help?
Cause, the space above the text is smaller than the one below, so the space with the padding appears different given the different space above and below the text
is it always this font? if so, just set the top and bottom padding of .hero_title to some magic numbers
I always use this font for the name surname, yeah, and almost the entire website as well except few parts
or just use grid and use 1fr for the rows
then just use something like
padding: 1em 0 2em 0; on .hero_title or something like thatalso, you don't really need it to be exactly the same: you can get away with close enough
1000x that
pixel perfect is an impossible dream
exactly
as long as it feels good enough, it's probably good
Thanks a lot for the advices, really appreciate that