Space between fieldsets how to remove it

Question

I have created a simple login form. Here is a screenshot of the login form.

enter image description here

Here is the HTML code. I have used the 960 framework.

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

and here is the 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);
}

I don't understand why there is a space between the submit button and the gray area. How can avoid it?

use `fieldset{margin:0px padding0px;}` – Dev Man Jun 07 '14 at 18:53 — Dev Man, Jun 07 '14 at 18:53

score 1 · Accepted Answer · answered Jun 07 '14 at 18:55

1

The browser you're viewing this in likely has default margins on all fieldsets. Try removing those margins page wide with something like this:

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

answered Jun 07 '14 at 18:55

Chris Montgomery

2,344
2
19
30

Ok now it works...but how can I center it in the page? – Mazzy Jun 07 '14 at 18:59
Sorry I forgot it. I fixed it through your suggestion. – Mazzy Jun 08 '14 at 21:55

score 0 · Answer 2 · edited Feb 02 '21 at 17:19

0

In my case, the above solution din't work. I have added a blank <Col></Col> in order to get space between the fieldsets.

edited Feb 02 '21 at 17:19

10 Rep

2,217
7
19
33

answered Feb 02 '21 at 13:09

vinny

360
3
10

Space between fieldsets how to remove it

2 Answers2