Units
px: A pixel. Use for setting specific sizes.
em: Width of "m" character in the element's font size. Use for scaling spacing, like in formatted text.
rem: Width of "m" character in the root font size. Use for non-scaling spacing, like in layouts.
Margin
Used for spacing elements.
https://www.smashingmagazine.com/2019/07/margins-in-css
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
https://css-tricks.com/what-you-should-know-about-collapsing-margins/
Padding
Adds extra space to elements.
Notes
There are many ways to implement layouts and add spacing to elements.
You may find a way to style something, but it breaks when added to another container.
Margin vs Padding
Margin collapses with adjacent elements.
Padding gets the background color.
Aspect Ratio
This is more of a size and layout thing.
https://frontendmasters.com/blog/things-that-can-break-aspect-ratio-in-…