填充问题

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 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 link：https://jsfiddle.net/vanessaddiniz/L81ekzmp/

我想让图片占满宽度，没有左右底部。 最好的方法是什么？

Answer 1

您好，欢迎来到 Whosebug。首先请阅读How to ask a question. Secondly, it would be a lot easier if you post your example code with the text in English. From what I understood, this might be the solution to your problem: 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%;
}

填充问题

Padding problems

css

children

padding