填充问题

Question

我的元素填充遇到一些问题。我有这些块，并且我想要它们的所有子项（子项不是来自同一元素），除了第一个具有左右填充的块。

这是我的 HTML 和 CSS：

.post-text {
      background-color: white;
      width: 62%;
      margin: 0 3% 0 5.8%;
      font-family: 'Verdana', sans-serif;
      padding: 0 4%;
    }
    
    #image-title {
     width: 100%;
	 padding: 0 0 3% 0;
    }
   .video-responsive{
     width: 70%;
     margin: 3% auto;
     overflow:hidden;
     padding-bottom:42%;
     position:relative;
     height:0;
   }
   .video-responsive iframe{
     left:0;
     top:0;
     height:100%;
     width:100%;
     position:absolute;
   }

<div class="post-text">
	  <img id="image-title" src="https://1.bp.blogspot.com/-QCsheMmEwl8/VwZ2vrhiWEI/AAAAAAAACus/MaOdcewd47wh9hWT4EWr5X8SO06fOPj2w/s1600/bebidas-em-russo.png" alt="imagem ilustrativa de título" title="título do post">
      <h2>título do 1º post</h2>
	  <p>Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
	  <audio controls>
		<source src="C:\Users\vanes\Music\Classical Drumming\05 Flight of the Bumblebee.mp3" type="audio/mp3">
	  </audio>
	  <p>Este é um parágrafo comum Este é um parágrafo comum Este é um <span>parágrafo</span> comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
	  <blockquote>Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum Esta é uma CITAÇÃO comum.</blockquote>
	  <p>Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
	  <div class="video-responsive">
		<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/da4wIEIeHg4?rel=0" frameborder="0" allowfullscreen></iframe>
	  </div>
	  <p>Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
	  <h3>subtítulo</h3>
	  <p>Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum Este é um parágrafo comum</p>
	  <div class= "post-footer">
		<p class="post-footer">tags</p>
		<p id= "post-footer-right" class="post-footer">botões</p>
	  </div>
	</div>

这是 jsfiddle 链接：https://jsfiddle.net/vanessaddiniz/L81ekzmp/

我希望图像采用全宽，没有右下角和左下角。 做到这一点的最佳方法是什么？

Answer 1

据我了解，这可能是您问题的解决方案：Answer

我已为您想要移动的元素添加了填充，并将 body 设置为 absolute。

p, h2, h3{
  padding-left:4%;
  padding-right:4%;
}

Answer 2

您可以将图像和下一个内容分开。因此，填充将仅用于内容并让图像具有全宽。这是JSFiddle

.post-text {
  background-color: white;
  width: 62%;
  margin: 0 3% 0 5.8%;
  font-family: 'Verdana', sans-serif;
}

.content {  
  padding: 0 4%;
}