fieldsets之間的空間如何刪除它

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; 
}