datalist之前和之后的css填充？

Question

我的网站上有一个数据列表，显示为一个链接框（取决于页面，1到30个链接）。

我需要在列表前后进行一些填充以使其看起来更好一点，但我不想在每个列表项之间添加填充。

我已尝试过：在我的CSS中选择器之前和之后：但它似乎没有做任何事情。

HTML

<div>
        <asp:DataList ID="dlSubCategories" class="SubCatLinks" RepeatDirection="Horizontal" RepeatColumns="3" runat="server"  ItemStyle-VerticalAlign="Middle" 
        Width="100%" SelectedItemStyle-BackColor="#F4F4F4" SelectedItemStyle-Font-Bold="true" >
            <ItemTemplate>
               <asp:Hyperlink ID="hlSubCategory" runat="server" CssClass="dlItem"></asp:Hyperlink>
            </ItemTemplate>
            <SelectedItemTemplate>
                <asp:Hyperlink ID="hlSubCategory" runat="server" CssClass="dlItem"></asp:Hyperlink>
            </SelectedItemTemplate>
        </asp:DataList>
    </div>

CSS

.dlItem                         { float:left; text-align:left; padding-left:10px; background-color:#F4F4F4;}
.SubCatLinks                    { float:left; width:740px; background-color: #F4F4F4; border-radius:2px; padding-bottom:20px; margin-bottom:20px; padding-left:5px; margin-top:15px; }
.SubCatLinks :before            { padding-top:20px; }

页面示例

我在顶行链接之前和底行之下但在行之间没有一些额外的灰色空格之后。

Answer 1

调整line-height看小提琴http://jsfiddle.net/DIRTY_SMITH/ru6yvrce/196/

.lineheight{line-height: 40px;}