When using percentage values for margin or padding in CSS, the calculation reference is consistently the width of the parent container, regardless of whether the property affects horizontal or vertical spacing.

This behavior applies to all directional properties including margin-top, margin-bottom, padding-left, and padding-right. For example, setting margin-top: 50% on a child element will compute the value based on the parent's width rather than its height.

Consider a parent container with a width of 100px and height of 200px containing a child element with margin-top: 50%. The resulting top margin will be 50px (50% of 100px), not 100px which would result from using the parent's height.

<div class="parent">
  <div class="child">Child Element</div>
</div>

<style>
.parent {
  width: 100px;
  height: 200px;
  background: lightgray;
  position: relative;
}

.child {
  margin-top: 50%; /* Calculated as 50px from parent width */
  background: coral;
  color: white;
  padding: 10px;
}
</style>

This consistetn width-based calculation enables powerful responsive design techniques. A common pattern uses padding-bottom with percentage values to create elements with fixed aspect ratios that scale with their container.

To create a square element that maintains a 1:1 ratio, set both width and padding-bottom to 100%. Since both are calculated from the parent's width, the visual result forms a perfect square.

<div class="aspect-container">
  <div class="square-box">
    <div class="content">Square Content</div>
  </div>
</div>

<style>
.aspect-container {
  width: 200px; /* Container can be any width */
  margin: 20px;
}

.square-box {
  width: 100%;
  padding-bottom: 100%; /* Creates 1:1 aspect ratio */
  background: steelblue;
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
</style>

The same principle works for other aspect ratios by adjutsing the padding-bottom percentage. For a 16:9 video container, use padding-bottom: 56.25% (9/16 = 0.5625). This technique provides fluid scaling while preserving dimensional relationships across different screen sizes.