CODEWITHSUNDEEP
htmlcss
Kelson Batista
Kelson Batista

Reputation: 492

How to ignore parent div padding

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>

Upvotes: 1

Views: 3705

Answers (2)

Rob Moll
Rob Moll

Reputation: 3453

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>

Upvotes: 0

ksav
ksav

Reputation: 20821

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>

Upvotes: 1

Related Questions