How to remove padding from an image inside a div without removing padding from everything else?

Question

So, I have this very simple div. I want to have a banner that touches the very edge of the box with no padding, but I want the text in the box to be padded and not touch the edge. How can I do this?

HTML:

<div class="mainoutline">
<img src="/PNG/banner3.png" width="100%">
<p>Dummy text</p>
</div>

CSS:

.mainoutline {
  border: 1px solid #d30606;
  background-color: #000000;
  position: fixed;
  width: 1080px;
  height: 300px;
  margin: auto;
  padding: 10px;
}

Answer 1

You could set the parent margin to 0 so the image stays in the edges and then position the text absolutely to the parent:

.mainoutline {
  border: 1px solid #d30606;
  background-color: #000000;
  position: fixed;
  width: 1080px;
  height: 300px;
  margin: auto;
  padding: 0;
}

p{
  position:absolute;
  color:white;
  top:0;
  left:20px;
}

<div class="mainoutline">
<img src="/PNG/banner3.png" width="100%">
<p>Dummy text</p>
</div>