Difference Between px % &amp; em Units in CSS - Coding

CSS units are used to define the size and layout of elements on a web page. They are used in various properties such as width, height, and font sizes, and choosing the right unit can be challenging. This article will discuss the differences between px, %, and em units in CSS, and provide examples to illustrate their appropriate usage.

Understanding CSS Units: px, %, and em

1. Pixels (px)

Pixels (px) are an absolute unit representing a single pixel on the user’s device screen. They provide precise control over the size of elements.

Example: The below CSS properties change a button width to 100 pixels and height to 40 pixels.

button { 
    width: 100px; 
    height: 40px;
 }

Usages

Pixel-perfect layouts: When precise control over size is required, especially for aligning elements with images or designing for specific screen resolutions.
Button sizes and icons: Maintaining consistent size across devices.

Percentage (%)

Percentage (%) is a relative unit representing a percentage of the containing element’s size. It is useful for creating responsive designs.

Example: Sets the container to 80% width of its parent and adds 10% margin on all sides

.container { 
   width: 80%; 
   margin: 10%; 
}

Usages

Responsive design: Defining element sizes relative to their container for flexible layouts that adapt to different screen sizes.
Margins and padding: Setting margins and padding as a percentage of the element’s width or height for consistent spacing.

3. em

The em unit is a relative unit based on the font size of the element’s parent element. One em equals the parent’s font size.

Example: (Sets the h1 heading to twice the size of the parent element’s font size)

h1 { 
    font-size: 2em; 
}

Usages

Font sizes: Defining font sizes relative to the parent’s font size for easier scaling and creating typographic hierarchies.
Responsive typography: Allows font sizes to adjust proportionally with the base font size.

Example: The example showcases the units responsive behavior.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Unit Comparison</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: rgb(100, 248, 100);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    h1 {
      margin-top: 50px;
      color: white;
    }

    .container {
      /* Fixed size of the container */
      width: 800px;

      /* Font size of the container changes with 
         respect to 2% of viewport width */
      font-size: 2vw;

      text-align: center;

      padding: 20px;

      margin-top: 50px;

      outline: 2px solid white;
    }

    .heading-px {
      /* px is fixed size and is not 
         related to parent(.container) */
      font-size: 50px;

      color: blue;

      margin-bottom: 10px;
    }

    .heading-em {
      /* em is relative to parent(.container) font size */
      font-size: 2em;

      color: red;

      margin-bottom: 10px;
    }

    .heading-perc {
      /* % is relative to parent(.container) 
         font size 100% is same as 1em */
      font-size: 100%;

      color: darkcyan;
    }
  </style>
</head>

<body>
  <h1>Difference between px, %, and em units in CSS</h1>
  <div class="container">
    <h1 class="heading-px">This is a heading (px)</h1>
    <h2 class="heading-em">This is another heading (em)</h2>
    <h3 class="heading-perc">This is a smaller heading (%)</h3>
  </div>
</body>

</html>

Output:

Output

Choosing the appropriate CSS unit is essential for creating flexible and responsive web designs. Pixels (px) offer precise control, percentages (%) allow for responsive layouts, and em units provide scalable typography. Understanding the differences and applications of these units will help you make informed decisions in your web design projects. Experiment with the examples provided to see how each unit behaves in different scenarios and enhance your CSS skills.

Reffered: https://www.geeksforgeeks.org

CSS

Related
Getting Started with Tailwind CSS
How to use Radial Gradient in Tailwind CSS ?
What is a CSS Reset ?
CSS Layout - float and clear
How to Set Transparency with Linear Gradient in CSS ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	15