Proportional and dynamic CSS units- rem, em, vh, vw etc

ok, sorry if this is kind of out of pipeline. I’ve always just jumped straight into CSS and thought it would be good to use Figma to kind of speed up look dev, figure out hover states, nail down colors and gradients and such before I set them up in css variables. but the only unit seems to be px. Am I missing something here? Also, is it possible to change padding and margins independently like

padding: 1rem 2rem;

or use collapsing margins where the smaller margin collapses to keep space from adding up like

.vertically-stacked-elements {
margin: 1rem auto auto 2rem;
}