Height Utilities Classes

Bellow is a Demonstration of How Height Utilities Class Works

Pixel Height Classes (1px-5px)
Applied to elements to set specific heights

h-1

h-2

h-3

h-4

h-5

....all the way up to h-1200
Practical Applications

Divider Lines

1px divider
3px divider

Custom Input Borders

Precise Spacing

Precise vertical spacing elements
Comparison with Other Units
1px (h-1):
0.1rem (~1.6px):
1pt (~1.33px):
1em (varies):
Important Notes
  • Pixel (px) units provide fixed, absolute measurements
  • 1px represents a single device pixel (though may be scaled on high-DPI devices)
  • These small heights are useful for borders, dividers, and precise UI elements
  • Unlike relative units (em, rem), px values don't change with font size
  • For accessibility, consider using px for decorative elements only
  • Combine with width utilities to create precise rectangular elements