how to add Space between 2 rows using panelGrid in visualforce page

Question

I am using panelGrid for this UI. Please fetch the code and Ui below and lt me know where I can add the css in order to increase the spaces between the rows. I have used rowclasses attribute in the panelGrid but it had no effect.

<apex:page standardController="Voucher__c"  recordSetVar="comp" extensions="CreateComp_Controller" docType="html-5.0" lightningstylesheets="true"> 
<style>
  .pannelConfigs {
    margin-left: 150px;
  }
    .rowConfigs {
   padding: 300px;
    padding-bottom: 300px;
    margin-bottom: 300px;
  }
</style>
<apex:form >
<apex:pageBlock title="Create Component"  mode="edit">
  <apex:pageBlockSection id="E-voucher" title="E-Voucher"   >
    <apex:panelGrid columns="2" rowClasses="rowConfigs" styleClass="pannelConfigs" width="200%"  >
    <apex:panelGroup >
    <apex:outputLabel value="Voucher 1"  />
 <apex:inputField value="{!comp.Voucher_1__c}"  /> <br/>
    </apex:panelGroup>
    <apex:panelGroup >
    <apex:outputLabel value="Voucher Amount 1" />
<apex:inputField value="{!comp.Voucher_Amount_1__c}"  />
        </apex:panelGroup>    
         <apex:panelGroup >
    <apex:outputLabel value="Voucher 2"  />
 <apex:inputField value="{!comp.Voucher_2__c}"  /> <br/>
    </apex:panelGroup>
    <apex:panelGroup >
    <apex:outputLabel value="Voucher Amount 2" />
<apex:inputField value="{!comp.Voucher_Amount_2__c}"  />
        </apex:panelGroup>
         <apex:panelGroup >
    <apex:outputLabel value="Voucher 3" />
 <apex:inputField value="{!comp.Voucher_3__c}"  /> <br/>
    </apex:panelGroup>
    <apex:panelGroup >
    <apex:outputLabel value="Voucher Amount 3" />
        <apex:inputField value="{!comp.Voucher_Amount_3__c}"  />
        </apex:panelGroup>  
        </apex:panelGrid>
    </apex:pageBlockSection>
 </apex:pageBlock> 
</apex:form>
</apex:page>

Answer 1

Two things.

First, your CSS is wrong:

  <style>
    .pannelConfigs {
      margin-left: 150px;
    }
      .rowConfigs {
     padding: 300px;
      padding-bottom: 300px;
      margin-bottom: 300px: // This should be a semi-colon!
    }
  </style>

CSS properties are always in the form of prop: value;, where the last character is a semi-colon, not a colon. The latter may cause the property to be ignored.

Second, you didn't actually specify the row classes:

<apex:panelGrid rowClasses="rowConfigs" columns="2" ...>

Third, you need to select the rows directly in your CSS, otherwise the normal table rules will override your styles.

Here's a functional example:

<style>
    .rows td {
        height: 100px;
    }
</style>
<apex:panelGrid rowClasses="rows" columns="2">
    <apex:outputPanel>
        Value 1
    </apex:outputPanel>
    <apex:outputPanel>
        Value 2
    </apex:outputPanel>
    <apex:outputPanel>
        Value 3
    </apex:outputPanel>
    <apex:outputPanel>
        Value 4
    </apex:outputPanel>
    <apex:outputPanel>
        Value 5
    </apex:outputPanel>
</apex:panelGrid>

In addition, I should note that you might not want to use an apex:panelGrid here; apex:pageBlockSection should be sufficient.

I would advise not using apex:panelGrid. Instead, you could render the fields correctly and add apex:pageBlockSectionItem as blank spaces:

<style>
    table > tbody > tr > td.rows {
    padding: 300px !important;
    padding-bottom: 300px !important;
    margin-bottom: 300px !important;
    }
</style>
<apex:pageBlock title="Create Component"  mode="edit">
    <apex:pageBlockSection id="E-voucher" title="E-Voucher">
        <apex:inputField value="{!comp.Voucher_1__c}"  />
        <apex:inputField value="{!comp.Voucher_Amount_1__c}" />
        <apex:pageBlockSectionItem dataStyleClass="rows"><span style="display:none"></span></apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem dataStyleClass="rows"><span style="display:none"></span></apex:pageBlockSectionItem>
        <apex:inputField value="{!comp.Voucher_2__c}"  />
        <apex:inputField value="{!comp.Voucher_Amount_2__c}"  />
        <apex:pageBlockSectionItem dataStyleClass="rows"><span style="display:none"></span></apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem dataStyleClass="rows"><span style="display:none"></span></apex:pageBlockSectionItem>
        <apex:inputField value="{!comp.Voucher_3__c}"  />
        <apex:inputField value="{!comp.Voucher_Amount_3__c}"  />
    </apex:pageBlockSection>
</apex:pageBlock> 

If you don't really need the 300px padding, which sounds excessive, given you just added a <br />, which could look like:

<apex:pageBlock title="Create Component"  mode="edit">
    <apex:pageBlockSection id="E-voucher" title="E-Voucher">
        <apex:inputField value="{!comp.Voucher_1__c}"  />
        <apex:inputField value="{!comp.Voucher_Amount_1__c}" />
        <apex:pageBlockSectionItem />
        <apex:pageBlockSectionItem />
        <apex:inputField value="{!comp.Voucher_2__c}"  />
        <apex:inputField value="{!comp.Voucher_Amount_2__c}"  />
        <apex:pageBlockSectionItem />
        <apex:pageBlockSectionItem />
        <apex:inputField value="{!comp.Voucher_3__c}"  />
        <apex:inputField value="{!comp.Voucher_Amount_3__c}"  />
    </apex:pageBlockSection>
</apex:pageBlock>