Question

我的元素填充有问题。我有这些块，我想要他们所有的孩子（孩子不是来自同一个元素），除了第一个有左右填充。

这是我的HTML和CSS：

＆＃13;

.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;
   }

＆＃13;

<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>

＆＃13;

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

我希望图像采用全宽，没有左右底部。最佳方式是做什么的？

Answer 1

您好，欢迎来到 StackOverflow 。首先请阅读How to ask a question。其次，如果您使用英文文本发布示例代码，那将会容易得多。根据我的理解，这可能是您问题的解决方案：Answer

我已为您要移动的元素添加了填充，并将正文设置为绝对。

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%;
}

填充问题

2 个答案: