百分比单位以父元素为基准？为何按钮padding设50%会溢出父div

你对CSS百分比单位的理解基本正确，但有个容易被忽略的规则：padding的百分比值是相对于父元素的宽度计算的，不管是上下padding还是左右padding。

具体分析你的代码 #

你的div设置了width:50%; height:50%;，它的宽度是父元素（body）宽度的50%（也就是视口宽度的50%），高度是视口高度的50%。

而按钮的padding:50%意味着：

• 左右padding各为div宽度的50%，加起来就是div宽度的100%
• 上下padding也各为div宽度的50%，加起来同样是div宽度的100%

按钮的总宽度 = 自身内容宽度 + 左右padding（100% div宽度），这直接超过了div的宽度；如果视口宽度大于高度，div的高度（视口高度的50%）会小于按钮的上下padding总和（div宽度的100%，也就是视口宽度的50%），按钮高度也会溢出div。

解决方法 #

如果想让按钮适配div的尺寸，有几种常见方式：

• 让按钮直接撑满div：

  button {
    width: 100%;
    height: 100%;
    padding: 0;
  }
  

• 用flex布局让div内部的按钮自动填充满：

  div {
    width: 50%;
    height: 50%;
    border: 1px solid red;
    display: flex;
  }
  button {
    flex: 1;
    /* 可选：用固定值或视口单位设置内边距，比如rem/vw */
    padding: 2rem;
  }
  

• 如果确实需要基于父元素高度设置padding，可以结合CSS变量：

  div {
    width: 50%;
    height: 50%;
    border: 1px solid red;
    --parent-height: 50vh;
  }
  button {
    padding: calc(var(--parent-height) * 0.25);
  }
  

你的原始代码 #

<!DOCTYPE html>
<html>
<body>
<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  body {
    width: 100vw;
    height: 100vh;
  }
  
  div {
    width: 50%;
    height: 50%;
    border: 1px solid red;
  }
  
  button {
    padding: 50%;
  }
</style>

<div>
  <button> Touch This </button>
</div>

</body>
</html>

内容的提问来源于stack exchange，提问作者ImAWeebキズネです