Creating scalable elements using rems and ems

suggest change

You can use rem defined by the font-size of your html tag to style elements by setting their font-size to a value of rem and use em inside the element to create elements that scale with your global font-size.


<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

Relevant CSS:

html {
  font-size: 16px;

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;

input[type="range"] {
  font-size: 1rem;
  width: 10em;

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;

Possible Result:

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents