Conversion Form

CH
VH

About the Unit

CH: The ch unit is a relative typographic unit based on the width of the '0' character of the current font. This unit is especially useful when you want the width of an element to be proportional to the text content, particularly for input fields or text areas. Using ch ensures that the element size adjusts based on the average character width of the current font, providing precise control over text layout. For example, if you set the width of a text input field to 10ch, it will be wide enough to accommodate 10 '0' characters of the font, making it useful for password fields or numeric inputs. The ch unit is less commonly used than other relative units like em or rem, but it is an excellent choice when precise width based on textual content is needed.

Pro Tip: ch → vh

Use ch for text width and vh for responsive height.

Quick Reference: Unit Conversion by Tens

CHVH
10ch7.407407vh
20ch14.814815vh
30ch22.222222vh
40ch29.62963vh
50ch37.037037vh
60ch44.444444vh
70ch51.851852vh
80ch59.259259vh
90ch66.666667vh
100ch74.074074vh
110ch81.481481vh
120ch88.888889vh
130ch96.296296vh
140ch103.703704vh
150ch111.111111vh
160ch118.518519vh
170ch125.925926vh
180ch133.333333vh
190ch140.740741vh
200ch148.148148vh
210ch155.555556vh
220ch162.962963vh
230ch170.37037vh
240ch177.777778vh
250ch185.185185vh

Live Unit Preview

See how different CSS units affect the size of the box below:

10px

10rem

10em

10%

10vw

10vh

Common Mistake

Be cautious when mixing ch and vh without testing on different screen sizes.

Real Code Example

/* Mobile-first card with ch → vh */
.card {
  padding: 0ch;     /* undefinedvh */
  font-size: 1.5rem;
  width: min(90vw, 40ch);
}
Unidade não encontrada.

Keyboard Shortcuts

  • Ctrl + C: Convert
  • Ctrl + I: Invert units
  • Esc: Reset values

More popular conversions