html - CSS 将表格单元格和整个页面内的间距调整为一个

Question

所以我有 CSS 来调节页面上所有输入类型的大小。然而，我仍然注意到一些在长度方面没有受到监管。我使用的 CSS 是这样的:

.leftRightBorder select, 
.leftRightBorder textarea, 
.leftRightBorder input[type=text] 
{
    width: 150px; 
}

这是使用上述 CSS 的页面图片:

如您所见，仍然存在一些小的长度问题。但我的主要问题是，每个组件上的“付款日”和“滚动日”字段都在同一个表格单元格中，所以即使我在它们之间放置一个
，间距也不等于它们之间的垂直间距页面上的其他所有内容。如何固定页面上所有内容之间的垂直间距？

编辑:

这是 ASP.NET 代码:

<tr id="tr63">
                        <td id="td64">
                            Payment Day
                        </td>
                        <td id="td65" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.FixedComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.PaymentDay", onchange = "UpdateField(this);" })%>
                            <%= Html.DropDownListFor(m => m.FixedComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);" })%>
                        </td>
                        <td id="td66" />
                        <td id="td67">
                            Payment Day
                        </td>
                        <td id="td68" class="leftRightBorder">
                            <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.PaymentDay", onchange = "UpdateField(this);", disabled="disabled" })%>
                            <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);", disabled="disabled" })%>
                        </td>
                    </tr>

我希望 HTML 帮助程序之间的间距等于页面上其他所有内容之间的间距。希望这会有所帮助。

Answer 1

尝试调整边距而不是填充。 input{margin-bottom: 5px;} padding 在边框内，margin 在边框外。