π· About HTML Units
A Thread𧡠π
π HTML Units
β CSS has several different units for expressing a length.
β Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
β Length is a number followed by a length unit, such as 10px, 2em, etc.
β A whitespace cannot appear between the number and the unit.
β However, if the value is 0, the unit can be omitted.
β For some CSS properties, negative lengths are allowed.
π Types Of Units
β There are two types of length units:
1οΈβ£ Relative Units
β em, vh, ex, ch, rem, vh, vmin, vmax, %
2οΈβ£ Absolute Units
β px, pt, pc, mm, cm, in
1οΈβ£ Relative Units
β Relative length units specify a length relative to another length property.
β Relative length units scale better between different rendering medium.
2οΈβ£ Absolute Units
β The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
β Absolute length units are not recommended for use on screen, because screen sizes vary so much.
β However, they can be used if the output medium is known, such as for print layout.
β Pixels (px) are relative to the viewing device.
β For low-dpi devices, 1px is one device pixel (dot) of the display.
β For printers and high resolution screens 1px implies multiple device pixels.
π Difference Between PX, EM and Percent
β Pixel is a static measurement, while percent and EM are relative measurements.
β The size of an EM or percent depends on its parent.
β If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16).
Thanks for reading this thread β€οΈ
If you like it , make sure you:
π· Like the tweet
π· Retweet the first tweet β‘
For more content , follow:
@MrunayU
Mrunay Uttarwar
@MrunayU
π Front End Dev π» Transitioning into Web3 π Content Creator π Always learning and sharing my journey π» Let's connect and geek out!
