Which responsive unit for margin and paddings

This forum is for all Flare issues related to styles, stylesheets and XML.

Which responsive unit for margin and paddings

Postby Matze on Wed Dec 07, 2022 2:52 am

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
Matze
Sr. Propeller Head
 
Posts: 137
Joined: Mon Jun 20, 2016 10:35 pm

Re: Which responsive unit for margin and paddings

Postby Psider on Thu Dec 08, 2022 5:55 pm

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
Psider
Propellus Maximus
 
Posts: 766
Joined: Wed Jul 06, 2011 1:32 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 2 guests