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

Question

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?

Show your (relevant, "*[mcve]*") HTML and CSS; otherwise we can only make guesses (wasting your time and ours) as to what's happening. — David Thomas, Jan 05 '22 at 12:33

Neil Lu · Accepted Answer · 2022-01-05T12:29:46.313

1

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));
}

edited Jan 05 '22 at 12:29

answered Jan 05 '22 at 12:26

Neil Lu

169
1
12

Great answer! Not sure thats neccessarily "cleaner" though – Duenna Jan 05 '22 at 12:27

score 1 · Answer 2 · answered Jan 05 '22 at 12:39

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 class="parent">
  <div class="child"></div>
</div>

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

2 Answers2