How do I set styles for an image IMG inside ?

Question

My page structure looks like this:

<div class="entry-content">
<p></p>
<p></p>
<p><img></p>
<p></p>
</div>

I want to stretch the image to the full width of the container. And I get it when I set such styles:

.entry-content p {
    margin-left: -30px;
    margin-right: -30px;
}

But it works for all <p>, and I only need for those that contain <img>.

I tried it like this, but this option only nails the image to the left edge.

.entry-content p img {
  margin-left: -30px;
  margin-right: -30px;
}

<div class="entry-content">
  <p></p>
  <p></p>
  <p><img src="https://via.placeholder.com/300.png/09f/fff"></p>
  <p></p>
</div>

Answer 1

You can use Selectors and child properties to simply do this

.entry-content> p >img {         // > is used for child 
  margin-left: -30px;
  margin-right: -30px;
}

you can also used id or class for img tag like this

<div class="entry-content">
 <p></p>
 <p></p>
 <p><img id="img1"></p>
 <p></p>
</div>

and

#img1{
//your styling here
}