有什么方法可以在 div 内实现完整的 parent 宽度，即使 parent 有填充？

Question

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

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

Answer 1

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

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

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

有什么方法可以在 div 内实现完整的 parent 宽度，即使 parent 有填充？

is there any way to achieve full parent width inside a div even if the parent has padding?

html

javascript

css

reactjs

apexcharts