CODEWITHSUNDEEP
htmlcss
Noodledew
Noodledew

Reputation: 519

How do I add a top padding to the second row?

I have two rows with three columns each. Now I want the second row to be a little bit more distant to the first.

I thought I could do this with giving the rows a wrapper and giving it's last child (which should be the second row right) a padding-top. Unfortunately, this does nothing.

HTML / CSS

.row {
  max-width: 1140px;
  margin: 0 auto;
}
.box {
  padding: 1%;
}
.services-container {
  margin-top: 60px;
}
<div class="services-container">
  <div class="row">
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
  </div>
</div>

Upvotes: 2

Views: 1304

Answers (2)

Charlene Vas
Charlene Vas

Reputation: 731

Add .row:nth-child(2){ padding-top: 100px;}

.row {
    max-width: 1140px;
    margin: 0 auto;
  }
  .box {
    padding: 1%;
  }
  .services-container {
    margin-top: 60px;
  }

  .row:nth-child(2){
      padding-top: 100px;
  }
        <!DOCTYPE html>
        <html>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  
   <link rel="stylesheet" href="./style.css">
      <head>
        <body>
          <div class="services-container">
            <div class="row">
              <div class="col span-1-of-3 box">
                <h5>Lorem</h5>
                <p>
                Ipsum
                </p>
              </div>
              <div class="col span-1-of-3 box">
                <h5>Lorem</h5>
                <p>
                Ipsum
                </p>
              </div>
              <div class="col span-1-of-3 box">
                <h5>Lorem</h5>
                <p>
                Ipsum
                </p>
              </div>
            </div>
            <div class="row">
              <div class="col span-1-of-3 box">
                <h5>Lorem</h5>
                <p>
                Ipsum
                </p>
              </div>
              <div class="col span-1-of-3 box">
                <h5>Lorem</h5>
                <p>
                Ipsum
                </p>
              </div>
              <div class="col span-1-of-3 box">
                <h5>Lorem</h5>
                <p>
                Ipsum
                </p>
              </div>
            </div>
          </div>
        
     
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  


  </body>

</html>

Upvotes: 0

Sumit Patel
Sumit Patel

Reputation: 4638

Add following css :nth-child(2). I whould suggest use parent class that because you will have many row in your site so better to use particular parent class.

.services-container .row:nth-child(2){padding-top:20px;}


.row {
  max-width: 1140px;
  margin: 0 auto;
}
.box {
  padding: 1%;
}
.services-container {
  margin-top: 60px;
}

.services-container .row:nth-child(2){padding-top:20px;}
<div class="services-container">
  <div class="row">
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
    <div class="col span-1-of-3 box">
      <h5>Lorem</h5>
      <p>
      Ipsum
      </p>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions