Adding Space Between DataList Rows

Question

I have a datalist with the following attributes:

ID="uxDataList" runat="server" ItemStyle-BorderColor="Black" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="2px"
AlternatingItemStyle-BorderStyle="Solid" AlternatingItemStyle-BorderColor="Black" RepeatDirection="Vertical" 
AlternatingItemStyle-BorderWidth="2px" CssClass="OrderHistoryDataList" HorizontalAlign="Center" Width="100%"
OnItemDataBound="uxDataList_OnItemDataBind" RepeatLayout="Table" GridLines="None"

Is there an attribute or css that I can use to put any sort of separation between the datalist rows? I want the layout to have borders around the item and the alternating item like I have but I want some sort of separation between the item and the alternating items of the list.

I've tried stuff like this css:

#mainContent table tbody tr { margin-bottom: 2em; }

this adds the padding/margin to the table row but there is no space between the borders of the item & alternating item

My datalist is set up like

<asp:DataList>
    <ItemTemplate>
        <div>
            <table> </table>
        </div>
        <div>
            <asp:Repeater>
                <ItemTemplate>
                    <div> </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <div>
            <table> </table>
        </div>
    </ItemTemplate>
</asp:Datalist>

Associated CSS:

.OrderHistoryDataList td { display:inline-flex; width:100%;}
.ImageDiv_OrderHistory { width:18%; display:inline-block; vertical-align:top; }
.DetailList_OrderHistory {display:inline-block; vertical-align:top;}
.DetailList_OrderHistory ul li { list-style-type:none; margin: 0px 0px 0px 0px;}
.DetailList_OrderHistory ul li:nth-child(3) { margin-top:10px; }
.OrderHistory_UnitPriceColor { color: #007f4b; }
.OrderHistory_ChargeAmountToDate { color: #B2B2B2; }
.OrderHistory_Total { color: #005CB8; }
.OrderHistory_DateLabel { font-size:large; font-style:italic; font-weight:bold; }
.OrderHistory_SmallerFont { font-size: smaller; }
.OrderHistory_MediumFont { font-size: medium; }
#mainContent table tbody tr { margin-bottom: 2em;} 

Answer 1

I overlooked the fact that the datalist control has a SeparatorTemplate used to separate rows. I added this after the ItemTemplate

<SeparatorTemplate>
    <h4 class="OrderHistory_RowSeparator"></h4>
</SeparatorTemplate>

CSS Class:

.OrderHistory_RowSeparator { margin: 0px 0px 5px 0px; }

Answer 2

Add CellPadding to the datalist

<asp:DataList ID="uxDataList" runat="server" CellPadding="5" ...>