Hello team, I have a quick question which seems I am unable to solve myself, so I am asking here.
There are three option namely px, em, % in padding margin of a container/grid. Which one should I use for padding/margin of a container/grid? I know for responsiveness of text, I should use em or rem but which one I should use for padding/margin of a container/grid to increase/decrease height/width. Any documentation? Please solve this query. Thanks
for the majority of designs px pixels work best and are the simplest to use.
em are good if you want all spacing to be relative to the font-size. If thats a design system you like then it has its advantages, as you can simply define the body font size you want ( for desktop / tablet / mobile ) and the spacing will update to reflect that.
However – you must note that EMs are relative to the parent container. For example:
We set the Body font size to 16px – now 1EM = 16px across that page.
However, we add a Container Block to a page and we set is font-size to 20px. Now within that Container 1em = 20px.
So that is something to be mindful.
% are the only truly responsive unit here, ie. they are relative to the width of the screen. NOTE i say the width of the screen – thats right even Top and Bottom spacing would be calculated as a % of the screens width. I only use % in very rare circumstances and i would advise against using them as your go to spacing unit.