即使父级有填充，是否有任何方法可以在 div 内实现完整的父级宽度？答案

【问题标题】：is there any way to achieve full parent width inside a div even if the parent has padding?即使父级有填充，是否有任何方法可以在 div 内实现完整的父级宽度？
【发布时间】：2022-01-05 12:20:58
【问题描述】：

我在这张卡片里面有一个卡片元素，你可以看到我有 2 个标题和一个顶点图表。由于我在父 div 上设置的填充，目前图表看起来也更小。我想让这个图表看起来像一个背景图像（但我不能将它设置为背景，因为它不是 SVG）。并查看第二张图片以了解我想要实现的目标！

我想要这样的输出！目前我通过使图表处于绝对位置并一点一点地调整底部和左侧属性来实现这一点，有没有实现这一点的更清洁的方法？

【问题讨论】：

显示您的（相关的，“minimal reproducible example”）HTML 和 CSS；否则我们只能猜测（浪费您和我们的时间）正在发生的事情。

标签： javascript html css reactjs apexcharts

【解决方案1】：

假设父元素有padding: 20px。在子元素上你可以这样做：

.child{
  width: calc(100% + 20px * 2);
  transform: translateX(calc(-1 * 20px));
}

【讨论】：

很好的答案！不确定那是否一定“更干净”

【解决方案2】：

您可以使用负边距来抵消填充

.parent {
  background: yellow;
  padding: 20px;
  width: 150px;
  height: 150px;
  margin: auto
}

.child {
  background: green;
  margin: 0 -20px;
  height: 100%
}

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

【讨论】：