Which responsive unit for margin and paddings

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Matze
Sr. Propeller Head
Posts: 163
Joined: Mon Jun 20, 2016 10:35 pm

Which responsive unit for margin and paddings

Post by Matze »

Hi all,
we are setting up our html5 output for responsive help, so let me asking a confusing rooky question:

I´ve change the font-size from px to rem (html root to 100% and the other classes to the right rem value. So far so good.

But what´s with the other pixel entries like margin, padding and border values. Is it a good idea to change these values to rem as well?
I´ve no idea WHERE I´ve to set the "start" rem value, e.g. for the font size I´ve set it to 100% in the html block at the beginning of my css, but where I´ve to define the start behaviour of the other values?

Thx
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Which responsive unit for margin and paddings

Post by Psider »

CSS-Tricks has a good article about font sizing:
https://css-tricks.com/accessible-font- ... explained/

tl;dr
Generally, leave the root pixel font-size as the browser default (usually 16px). Use em/ex/rem for everything except borders, for which you would use px instead.


This is an old article but I think the principles still apply if you want a short summary of the scenarios you might use other measurements:
http://thenewcode.com/775/Which-CSS-Mea ... o-Use-When
Post Reply