字段集之間的空間如何刪除它

Question

我創建了一個簡單的登錄表單。 這是登錄表單的屏幕截圖。

這是 HTML 代碼。 我用過960框架。

<article class="container_12">   
        <section id="login" class="grid_3">
                <form action="POST">
                    <div id="loginheader"></div>
                    <fieldset class="logininputfields">
                        <input type="text" name="username" placeholder="Username" autofocus>
                        <input type="password" name="password" placeholder="Password">
                    </fieldset>
                    <fieldset class="submitfield">
                        <input type="submit" value="Log In">
                    </fieldset>
                </form>
        </section> 
    </article>

這是 CSS

#login
{
    height: 330px;
}

#loginheader
{
    background: black;
    height: 32px;
}

.logininputfields
{
    background-color: #e5e5e5;
    padding-left: 24px;
    padding-bottom: 40px;
    height: 160px;
}

.logininputfields input[type="text"],input[type="password"]
{
    background: #c8cbcc;
    margin-top: 30px;
    border:1px solid #ccc;
    color: #ededed;
    font-weight: 600;
    height: 30px;
    width: 170px;
}

.submitfield input[type="submit"]
{
    background: #0099ff;
    border: 1px solid #ccc;
    height: 42px;
    width: 220px;
    font-weight: 600;
    font-size: large;
    color: white;
}


.submitfield input[type="submit"]:hover
{
    background: rgba(0,154,255,0.60);
}

我不明白為什么提交按鈕和灰色區域之間有一個空格。 怎樣才能避免呢？

Answer 1

您正在查看的瀏覽器可能在所有字段集上都有默認邊距。 嘗試使用以下內容刪除頁面寬度的頁邊距：

fieldset {
   margin:0px;
   padding:0px;
}

Answer 2

就我而言，上述解決方案不起作用。 我添加了一個空白的<Col></Col>以便在字段集之間留出空間。