css - 使用模块样式覆盖门户样式 - div 标签之间的空格

Question

我有一些标签与文本框和下拉列表水平对齐。下拉菜单和文本框之间出现间隙。如果我检查元素，它会显示门户的 css 文件，其中不包含导致我想要减少的间隙/垂直空间的原因的信息。我想要的是在模块级别覆盖这些设置。

在屏幕截图中，我使用 Firefox 上的“Web 开发人员”工具突出显示了样式。出现下拉列表之间的空隙。

 <div class="ColOne">
        <asp:Label ID="lblCategory" runat="server" Text="Category" CssClass="labelStyle" style="position: relative"></asp:Label>
    </div>
    <div  >
        <asp:DropDownList ID="ddlCategory" runat="server"  DataSourceID="sqlCategories" DataTextField="Name" DataValueField="CategoryID" AutoPostBack="True"></asp:DropDownList>
    </div>
    <div class="ColOne">
        <asp:Label ID="lblSubCategory" runat="server" Text="Sub Category" CssClass="labelStyle"></asp:Label>
    </div>
   <div >
        <asp:DropDownList ID="ddlSubCategory" runat="server" DataSourceID="sqlSubCategory" DataTextField="Name" DataValueField="SubCategoryID"></asp:DropDownList>
    </div>

我的风格:

div.ColOne {
    width: 150px;
    float: left; /* to place the column next to the other*/
    padding-left: 0px;
    padding-top: 12px;
    clear: none;
}

div.ColEmpty {
    margin-top:0;
}

单击“显示样式”信息，我得到以下信息:

/* Line 28 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  border-top-width: 0px;
  border-right-width-value: 0px;
  border-bottom-width: 0px;
  border-left-width-value: 0px;
  border-top-style: none;
  border-right-style-value: none;
  border-bottom-style: none;
  border-left-style-value: none;
  border-image-source: none;
  border-image-slice: 100% 100% 100% 100%;
  border-image-width: 1 1 1 1;
  border-image-outset: 0 0 0 0;
  border-image-repeat: stretch stretch;
  font-family: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  font-size-adjust: inherit;
  font-stretch: inherit;
}

Answer 1

我已经通过添加以下内容修复了它

div.ColEmpty input[type="text"], select, textarea {
    margin-top:0;
    position: relative;
  line-height:0px;
    top: 2px;
     margin-bottom: 0px;
}

<div class="ColEmpty">
        <asp:DropDownList ID="ddlSubCategory" runat="server" DataSourceID="sqlSubCategory" DataTextField="Name" DataValueField="SubCategoryID"></asp:DropDownList>
</div>