0
163
Viewsis there any way to achieve full parent width inside a div even if the parent has padding?
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?
·
Juan Pablo Isaza
2 answers
Answer question0
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));
}
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
Answer question