Exploring the Difference Between width: 100% and width: auto

Introduction to the width Property

The width property is used to set the width of an element. By default, width sets the width of the content area, but if the box-sizing property is set to border-box, it instead sets the width of the border area.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <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>

  <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.