What is the best way to include a padding at the top of the second row?

I have two rows with three columns each. I am trying to create some spacing between the two rows.

I attempted to achieve this by wrapping the rows and adding padding to the last child (which should be the second row). However, this approach did not work as expected.

Here is the 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>
htmlcss

Answer №1

To enhance the styling, include the following CSS code snippet: :nth-child(2). It is recommended to utilize a parent class to target specific rows on your website, especially if you have multiple rows.

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

Answer №2

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a workaround utilizing calc() and vh specifically for Chrome browsers?

Is it possible to find a CSS-only solution for incorporating vh in calc() functions specifically for Chrome browsers? I am trying to implement calc(100vh - 25px) as the top margin in order to make a 25px bar stick to the bottom of the page, but I am facin ...

cssgoogle-chromeviewport-unitscss-calc

The functionality of if and else statements within local storage is not functioning as

I've been working on implementing a styleswitcher for my website. I successfully created a dropdown menu and saved it in localstorage. However, I'm facing an issue when trying to use the localstorage information to trigger an alert() through if a ...

javascriptjqueryhtmllocal-storage

Utilizing Javascript to Call a .NET Web Service with HTML5 (Using HTTP POST)

I need assistance with this issue regarding my use of HTML5 on my website along with a .NET Service (.asmx). I have a method called getText() that returns a string of text. How can I properly call this method and display it on my HTML5 webpage? Here is th ...

.netweb-serviceshtml

Struggling to make the javascript function compatible with the drop-down menu

I'm encountering issues with making my JavaScript work properly alongside my HTML. Specifically, I want the "activity" drop-down box to function in conjunction with the "city" drop-down box. For instance, if I choose "Brisbane" and then select an acti ...

javascripthtml

Building a responsive CardMedia component with React Material UI

I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...

cssreactjsflexboxresponsive-designmaterial-ui

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...

htmlcsspseudo-element

What is the process for updating button text upon clicking in Angular?

To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error. import { Component } from '@angular/core ...

javascriptcssangular

Ways to hide the loading spinner on a web browser

As the owner of a Comet application, I am facing an issue with long polling requests being sent via AJAX immediately after the page loads. These requests take a while to complete, causing browsers like Safari and Chrome to display their loading icon even t ...

htmlajaxgoogle-chromesafaricomet

CSS3 family tree tutorial: Incorporating a wife into the design

I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...

htmlcssfamily-tree

Unable to apply height and width properties to CSS div

I've been facing an issue with applying height and width to div elements in my project. The tech stack I'm using includes TailwindCSS and Nextjs. My objective is to create vertically snap-scrolling slides, but the height and width properties see ...

htmlcssnext.jstailwind-css

Steps to Delete Branding WHMCS Ver 8.1 "Powered by WHMcomplete solutions"

As a newcomer to this community, I am reaching out for the first time seeking assistance. A friend of mine recently updated his WHMCS to the latest version and encountered a branding line above the footer area. Previously, he could remove it by editing th ...

phpjquerycsstemplateswhmcs

How to send PHP email using HTML form

After attempting to find an answer to my inquiry here, I am now starting a new thread. Just a brief explanation: I have a Contact Form with 180 input fields and calculations for each field. I wish to send all the fields along with the calculated values v ...

phphtmlemail

div positioned on top of additional div elements

My HTML code consists of simple div tags <div class="left">Project Name: </div> <div class="right">should have a name</div> <div>Shouldn't this be on a new line?</div> These classes are defined in a stylesheet as ...

htmlcss

Using Chrome or Firefox's inspector tool to make changes to HTML code

Is it possible to save changes made to HTML elements in Chrome/Firefox inspector directly to a local file on my desktop? ...

htmlgoogle-chromefirefox

How can I display only a horizontal scrollbar on the body content while avoiding an excessively long image header?

Currently, I have a 4000px width image as the header of my website. To hide the horizontal browser scrollbar, I am using the following CSS: html { overflow-x: hidden; } However, this method results in the horizontal scrollbar never appearing. I ac ...

htmlcssimageheader

Having trouble passing a jQuery variable containing a string value to PHP through the jQuery AJAX function?

Below is the jQuery function code snippet: function processMessage() { if (textValue != "") { messageString='<div class="alert-box round"><p class="text-left">' + username + ':' + textValue + '</p>< ...

javascriptphpjqueryhtmlajax

Exploring the Concept of Nested ViewModels in Knockout.js Version 3.2.0

I have a global view model that is applied to the main div and I also have other view models that I want to apply to nested elements within my main div However, I am encountering an issue: You cannot bind multiple times to the same element. Below is ...

javascripthtmldata-bindingknockout.jsviewmodel

javascript Href and onclick malfunctioning

I am encountering an issue with a form on my webpage: <form name="myForm" id="myForm" method="post" action="someUrl.php"> ... </form> There is a div outside of this form which contains an anchor link: <a href="anotherUrl.php" onclick="doc ...

javascriptphphtml

Switching the navigation menu using jQuery

I am looking to create a mobile menu that opens a list of options with a toggle feature. I want the menu list to appear when the toggle is clicked, and I also want to disable scrolling for the body. When the toggle menu is clicked again, the list should c ...

javascriptjqueryhtmlcssscroll

Issue with applying value changes in Timeout on Angular Material components

I'm currently experimenting with Angular, and I seem to be struggling with displaying a fake progress bar using the "angular/material/progress-bar" component. (https://material.angular.io/components/progress-bar/) In my "app.component.html", I have m ...

javascripthtmlangulartypescript