Question

First Image:

Second Image:

Problem: why in the second image there is a space between the yellow and green after a hidden html tag shows please help? how should i fix this? Thank you so much.

Here’s my code in html

<div id="login">
    <?php
    session_start();
    $errmsg = array();
    if(isset($_SESSION['errmsg'])&&is_array($_SESSION['errmsg'])&&count($_SESSION['errmsg'])>0){
        foreach($_SESSION['errmsg'] as $msg){
            echo '<p id="error"><img src="img/error.png" alt="Login error!">'.$msg.'</p>';
        }
        unset($_SESSION['errmsg']);
    }
    ?>
    <form method="post">
        <label for="email">Email:</label>
            <input id="email" type="email" name="email" required>
        <label for="pass">Password:</label>
            <input id="pass" type="password" name="pass" required>
            <input id="submit" type="submit" name="login" value="Login">
    </form>
    <?php
    include 'functions/functions.php';
    if(isset($_POST['login'])){
        $result=AuthenticateUser($_POST['email'],$_POST['pass']);
        if($result){

        }
        else
            $errmsg[]='Login error:please check your e-mail & password';
            session_regenerate_id();
            $_SESSION['errmsg'] = $errmsg;
            session_write_close();
            header('location:index.php');
            exit();
    }
    ?>
</div>

Here’s my code for css

label, input#pass, input#register{
    display:block;
}
p#error {
    color:#FF0000;
}
div#nav{
    background-image:url('../img/nav.png');
    background-repeat:no-repeat;
}
div#nav, a {
    text-decoration:none;
}
body {
    margin:0 auto;
    width:600px;
}
div#login, div#register {
    background-image:url('../img/form.png');
    background-repeat:repeat-y;
}

Answer 1

It probably has something to do with the default styles for <p>. Try changing <p id="error"> to <div id="error"> and see if that fixes it. You could also try adding margin-top:0px; to the style rule for p#error.

If either of those solutions fix it, then problem was because of the default top-margin value for the <p> tag. The margin pushed down the start of the <div id="login"> and caused the gap.