html - 在 中设置文本边距并排除图像

Question

我是初学者，我正在尝试使用 CSS 设计网页样式。我现在使用的是 Wordpress 模板 (activello)。我希望页面中的文本比图像有更多的边距(请参阅 picture )但是当我使用此代码编辑 css 时

p {
  margin: 30px;
}

文本和图像都受到影响...我要写什么？

这里是代码:

<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

您可以对图像应用负边距以抵消 p 边距:

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