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.

HTML:

<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:

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents