Insert space between h:panelGrid rows

Question

Versions :

Aapche MyFaces 2.1.14

RichFaces 4.3.5

Issue :

I am facing an issue to insert space between rows of h:panelGid. Below is the general layout for the page :

User Id :   <empty space>
<INPUT-BOX>     <empty space>

<!-- space here -->

Password 1  :   <empty space>
<INPUT-BOX>     Description Text

<!-- space here -->

Password 2  :   <empty space>
<INPUT-BOX>     Description Text

To get above layout , i have used below code. Each inner panel grid holds 4 elements in two columns. Top panel grid wraps all inner panel grids with column as 1.

The issue is , I am not able to get space betwen two inner panel grids or more specifically between table cells. I have tried using :

1)cellspacing

2)rowClasses

But none of the two approches are working. The style used for rowClasses is given below. When debugged through browser , it seems that rowClasses does get applied to each <tr> of table.

Can anybody please help ?

Code :

<h:panelGrid columns="1" rowClasses="tableCell,tableCell,tableCell,tableCell" cellspacing="100px">


        <h:panelGrid columns="2">
                <h:outputText value="User ID:" styleClass="label"/>
                <h:outputText value=""/>

                <h:inputText id="userid" name="userid" styleClass="input"/>
                <h:outputText value=""/>
        </h:panelGrid>

        <!-- space here --> 


        <h:panelGrid columns="2">
                <h:outputText value="Password1:" styleClass="label"/>
                <h:outputText value=""/>

                <h:inputText id="passwd1" name="passwd1" styleClass="input"/>
                <h:outputText  value="This is password 1"/>

        </h:panelGrid>

        <!-- space here --> 
        <h:panelGrid columns="2">
                <h:outputText value="Password2:"/>
                <h:outputText value=""/>

                <h:inputText id="passwd2" name="passwd2" styleClass="input"/>
                <h:outputText value="This is password 2 ."/>
        </h:panelGrid>
        <!-- space here --> 

        <h:commandButton id="submit" styleClass="button" value="Submit" action="#{bean.action}"/>


</h:panelGrid>

<!-- style -->

.tableCell{
    margin-top : 100px;
}