Posted inCSS Front-end Dev

Difference Between width: 100% and width: auto 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        color: #fff;
        font-size: 2rem;
        text-align: center;
      }
      .parent {
        width: 600px;
        height: 600px;
        background-color: #2177b8;
        border: 10px solid #21373d;
        padding: 20px;
      }
      .child {
        background-color: #ee3f4d;
        border: 10px solid #d8e3e7;
        margin: 20px;
        height: 100px;
      }
      .auto {
        width: auto;
      }
      .hundred-percent {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      parent
      <div class="child auto">child1: width:auto</div>
      <div class="child hundred-percent">child2: width:100%</div>
    </div>
  </body>
</html>

In this example, we set the parent element to have padding: 20px and gave both child elements margin: 20px. child1 has a width property of auto, while child2 has a width property of 100%.

Observations

  • child1 (width: auto): The width adapts to the content area of the parent and does not overflow. Final width calculation for child1:

Parent width: 600px

Margin usage: 20px * 2 = 40px

Border usage: 10px * 2 = 20px

Final width = 600px — 40px — 20px = 540px

child2 (width: 100%): The width equals the width of the parent and may overflow. Final width calculation for child2:

Parent width: 600px

Final width = 600px (directly matches the parent width)

Conclusion

  • width: 100%: The content area of the child element fills the content area of the parent. If the child element also has padding, border, etc., or if the parent has margins and padding, it may cause the child element to overflow.
  • width: auto: The child element’s width is automatically adjusted based on its content, padding, border, and margin to fit within the content area of the parent.

Therefore, in development, it’s advisable to choose width: auto, as it will better maintain the width relative to the parent element. On the other hand, using width: 100% can result in additional spacing being added to the element’s size, potentially leading to layout issues.

Tags: