How to ignore parent div padding-CodePudding

I have an image (inner-img) inside a div with padding (inner-div) and I need to make this image to fit the outside div (main-div). I tried to use negative margin but is not working. Any light?

.main-div {
  width: 500px;
  background: yellow;
}

.inner-img {
  max-width: 100%;
}

.inner-div {
  padding: 20px;
}

<div class="main-div">
  <div class="inner-div">
    <img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
  </div>
</div>

CodePudding user response：

If you can't change your markup, you can use negative margin on .inner-img so that the image breaks out of .inner-div

.main-div {
  width: 500px;
  background: yellow;
}

.inner-img {
  max-width: calc(100%   40px);
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
}

.inner-div {
  padding: 20px;
}

<div class="main-div">
  <div class="inner-div">
    <img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
  </div>
</div>

CodePudding user response：

I Moved the img out of the inner div and placed it in the outer div. Doing this allows the img to expand to the constraints of it's parent which is now .main-div:

This may not work for your use case but thought it worth mentioning.

.main-div {
  width: 500px;
  background: yellow;
}

.inner-img {
  width: 100%;
}

.inner-div {
  padding: 20px;
}

<div class="main-div">
  <img class="inner-img" src="https://plainbackground.com/plain1024/60b13b.png" alt="">
  <div class="inner-div">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia veniam fugiat et accusamus iusto quos beatae eum, corrupti odit animi porro adipisci quasi eligendi error non cumque ex ut quod.</p>
  </div>
</div>