What’s the difference between em, rem, px, and % units in CSS?

Example Concept:

• px (pixels): An absolute unit that represents a fixed size on the screen. It does not scale with user settings or parent elements.
• em: A relative unit that is based on the font-size of the element's parent. It scales according to the inherited font size, which can lead to compounding effects.
• rem (root em): Similar to em, but it is relative to the root element's font-size (usually the element). This avoids compounding and provides more predictable scaling.
• % (percent): A relative unit that is based on the parent element's dimensions. It is commonly used for widths and heights to create flexible layouts.