Set text margin in the <p> and excluding the image

Question

I am a beginner and I trying to style a webpage with css. I am now using a Wordpress template (activello). I would like the text in the page to have more margin than the image (see picture) but when I am editing the css with this code

p {
  margin: 30px;
}

both the text and the image are affected... What shall I write?

Here the code:

<div class="entry-content">
  <p><img src="http://localhost/wp/wp-content/uploads/2017/09/banner-1.png" alt="" width="2880" height="672"></p>
  <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada iaculis nisi id consectetur. Suspendisse quis elementum mi, ac luctus libero. Nunc sapien eros, tempor in mattis in, pulvinar eget enim. Aliquam id molestie risus. Donec ligula orci, pulvinar sed turpis non, porta suscipit eros. Phasellus condimentum tincidunt scelerisque. Integer tempus risus in massa venenatis, a rhoncus urna fringilla.</p>
  <p>Nam vulputate rutrum neque. Phasellus ultrices imperdiet imperdiet. Aenean viverra ipsum ligula, in mattis risus ultrices in. Nam vel nunc congue, fringilla nisl in, hendrerit magna. Donec et luctus nisi, non dapibus dolor. Sed euismod tempor odio, ut pharetra mi vehicula.</p>
</div>

Answer 1

You can apply a negative margin to the image to counteract the p margin:

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