Padding problems

Question

I'm having some problems with the padding of my elements. I have these blocks and I want all of their children (the children are not from the the same element), except the first one to have right and left padding.

Here's my HTML and 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>

Here's the jsfiddle link: https://jsfiddle.net/vanessaddiniz/L81ekzmp/

I want the image to take the full width, without the right and left bottom. What's the best way to do this?

I don't understand what you want... which exact elements need a padding and which not? — Siyah, Mar 20 '17 at 22:37
@Siyah I want all the elements inside the block to have the specified left and right padding, EXCEPT the image in the beggining. — Vanessa Diniz, Mar 20 '17 at 22:48
Possible duplicate of [How can I use a not:first-child selector?](http://stackoverflow.com/questions/12289853/how-can-i-use-a-notfirst-child-selector) — domsson, Mar 20 '17 at 23:02
See the linked duplicate question, the answer has exactly what you need, which is basically the [first-child selector](https://developer.mozilla.org/en/docs/Web/CSS/:first-child) — domsson, Mar 20 '17 at 23:03
Can you state which elements in your codes you would not like to have right and left padding? — repzero, Mar 20 '17 at 23:19

score 0 · Accepted Answer · answered Mar 20 '17 at 23:07

0

Hello and welcome to StackOverflow. First of all please read 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

I've added padding to the elements you wanted to move and set the body to absolute.

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

answered Mar 20 '17 at 23:07

ZombieChowder

1,187
12
36

The content langugae had nothing to do with the problem. I already figured out how to do it. But thank you! – Vanessa Diniz Mar 21 '17 at 04:28

score 0 · Answer 2 · answered Mar 21 '17 at 02:31

0

You can separate the image and the next content. So the padding will goes to the content only and let the image has full width. Here is the JSFiddle

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

.content {  
  padding: 0 4%;
}

answered Mar 21 '17 at 02:31

Johan Pranata

317
2
9

Thanks! I figured that out alone later, but thank you so much for the tip anyway! – Vanessa Diniz Mar 21 '17 at 04:27

Padding problems

2 Answers2