父元素有内边距，如何让绝对定位子元素宽度等于内容区域宽度？

要让绝对定位的子元素的宽度等于父元素的内容区域宽度（即父元素的宽度减去内边距），你可以使用以下方法：

方法1：使用 left 和 right 属性

通过设置子元素的 left 和 right 属性为父元素的内边距值，可以让子元素的宽度等于父元素的内容区域宽度。

.parent {
  position: relative;
  padding: 20px; /* 父元素的内边距 */
}

.child {
  position: absolute;
  left: 20px; /* 等于父元素的左内边距 */
  right: 20px; /* 等于父元素的右内边距 */
}

方法2：使用 calc() 函数

通过 calc() 函数计算子元素的宽度，使其等于父元素的宽度减去内边距。

.parent {
  position: relative;
  padding: 20px; /* 父元素的内边距 */
}

.child {
  position: absolute;
  width: calc(100% - 40px); /* 100% 减去左右内边距的总和 */
  left: 20px; /* 等于父元素的左内边距 */
}

方法3：使用 inset 属性（现代浏览器支持）

inset 是 top, right, bottom, left 的简写属性，可以一次性设置子元素的位置。

.parent {
  position: relative;
  padding: 20px; /* 父元素的内边距 */
}

.child {
  position: absolute;
  inset: 0 20px 0 20px; /* 上下为0，左右为父元素的内边距 */
}

解释

• left: 20px 和 right: 20px 表示子元素的左右边缘分别距离父元素的左右边缘 20px，这样子元素的宽度就是父元素的内容区域宽度。
• calc(100% - 40px) 表示子元素的宽度是父元素宽度的 100% 减去左右内边距的总和（20px + 20px = 40px）。
• inset 属性是 top, right, bottom, left 的简写，可以一次性设置子元素的位置。

注意事项

• 确保父元素的 position 属性为 relative 或 absolute，否则子元素的绝对定位会相对于最近的定位祖先元素或视口。
• 如果父元素的内边距是百分比或 em 等单位，需要根据实际情况调整 left 和 right 的值。

通过这些方法，你可以确保绝对定位的子元素的宽度等于父元素的内容区域宽度。