间距表格框

Question

我的页面上有一个表单，我试图在文本框之间留出更多空间。

我以各种方式尝试'填充'，但它们似乎被组合在一起，无论我尝试什么都会影响其中的四个。

• The page

如果我没有误会，这就是表格的CSS：

.form-inner
{
    /*background:url('../img/content-bg-top.png') no-repeat left top;*/
    min-height:278px;
    margin:-40px 0 0 0;
    padding:72px 72px 21px 36px;
    position:relative;
    z-index:1;
    font-size:14px;

    -webkit-text-shadow:0 1px 0 rgba(255,255,255,0.4);
    -moz-text-shadow:0 1px 0 rgba(255,255,255,0.4);
    text-shadow:0 1px 0 rgba(255,255,255,0.4);
}

有什么建议吗？

Answer 1

padding值用于表示对象本身与内部内容之间的距离。

您应该对内容中分类为form-inner的每个文本框使用margin键。

.form-inner input[type=text]
{
    margin: 10px 20px;
}

边距定义了对象本身与其旁边的另一个对象之间的距离。

margin: [top] [right] [bottom] [left]

Answer 2

来自styl.css（第317行） .form-field { ... margin: 0 0 3px }（仅下限... 3px）

所有这四个输入框都在.form-field类的容器内。

一个修复：

.form-field { margin:0 10px 3px }
.form-field:first-child { margin-left:0 }

（可能需要保留右边。我从未使用过右到左文本）

Answer 3

您可以在margin-right课程中添加.form-field属性，但请记住在表单上设置更大的宽度。

Answer 4

我认为.form-inner是表单周围的框。如果您希望文本框之间有更多空格，则应设置.form-field类的样式。

例如：

.form-field {
    padding-right:10px;
}