使用 CSS 增加文本框之间的空间答案

【问题标题】：Increase space between textboxes using CSS使用 CSS 增加文本框之间的空间
【发布时间】：2016-03-29 05:50:48
【问题描述】：

我想在不使用换行符的情况下增加两个文本框之间的空间。我创建了一个 CSS 规则，但是在显示页面时它没有效果。

这些是文本框

<asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label><asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox><br />
    <asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label><asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> <br />

我在 CSS 文件中有这条 CSS 规则

div#page  .textboxcontainer{
    margin: 10px auto;

非常感谢任何帮助

【问题讨论】：

发布 HTML，而不是 ASP。
@j08691，他写的是asp，不是html
@JNF - ASP 在这里无关紧要。只有渲染的标记很重要。我也没有看到 ID 为 page 的元素。
@j08691，相反。渲染的html是.net生成的，OP与它无关
@j08691，有人可能会说 html 与答案相关，但与问题无关。

标签： css asp.net margin

【解决方案1】：

margin不适用于asp:label，因为asp:label被渲染成span，这是一个inline元素

尝试将 display:inline-block 添加到您的 CSS 规则中。

【讨论】：

【解决方案2】：

您的 <asp:Label> 将呈现为 HTML span，默认显示 inline，导致顶部和底部 margin 被忽略。将display: block 或display: inline-block 添加到您的.textboxcontainer 规则中。

【讨论】：

与其他答案有何不同？

【解决方案3】：

ASP 标签控件在运行时呈现在<span> 标记中。这就是给你带来麻烦的原因。只需将标签和文本框控件包装在它们自己的 div 中，您就会得到块分离。向该 div 添加一个类并给它一个 margin-bottom: XXpx 并且你正在路上

         <div class="form-group">
             <asp:Label ID="Discount" CssClass="textboxcontainer" runat="server" Text="Discount: "></asp:Label>
             <asp:TextBox ID="TextBoxDiscount" runat="server"></asp:TextBox>            
         </div>
         <div class="form-group">
             <asp:Label ID="TotalAfterDis" CssClass="textboxcontainer" runat="server" Text="Total : "></asp:Label>
             <asp:TextBox ID="TextBoxTotal" runat="server"></asp:TextBox> 
         </div>

CSS

.form-group{
    margin-bottom: 10px;
}

【讨论】：