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

i have a card element here inside this card as you can see i have 2headings and one apex chart. currently the chart also look smaller because of the padding i set on the parent div. i want to make this chart look like a background image ( but i can't set it as background because it's not an SVG ). and see the second image to understand what i want to achieve!

i want the output like this! currently i achieve this by making the chart in a absolute position and tweaking the bottom and left properties little by little, is there any cleaner way to implement this?

CodePudding user response：

Suppose the parent element has padding: 20px. On the child element you can do:

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

CodePudding user response：

You can use negative margin to offset the padding

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

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

<div >
  <div ></div>
</div>