how to remove the empty space top of the page?

I want to remove the empty space above the login page

I have no idea which place to come this space

I add a login page in my mvc project and bydefault have empty space on the top of the page

I want to remove that empty space on top of the page

see this referance

enter image description here

checkLogin.cshtml


@{
    ViewBag.Title = "checkLogin";
}

@using (Html.BeginForm("checkLogin", "Home", FormMethod.Post))
{
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100">
                <form class="login100-form validate-form">
                    <span class="login100-form-title p-b-26">
                        kosmoanuaf
                    </span>
                    <span class="login100-form-title p-b-48">
                        <i class="zmdi zmdi-eye"></i>
                    </span>

                    <div class="wrap-input100 validate-input" data-validate="Valid email is: a@b.c">
                        <span class="btn-show-pass">
                            <i class="glyphicon glyphicon-envelope"></i>
                        </span>
                        <input class="input100"  type="text" name="username" required/>
                        <span class="focus-input100" data-placeholder="Email"></span>
                    </div>

                    <div class="wrap-input100 validate-input" data-validate="Enter password">
                        <span class="btn-show-pass">
                            <i class="zmdi zmdi-eye"></i>
                        </span>
                        <input class="input100" type="password" name="password" required/>
                        <span class="focus-input100" data-placeholder="Password"></span>
                    </div>

                    <div class="container-login100-form-btn">
                        <div class="wrap-login100-form-btn">
                            <div class="login100-form-bgbtn"></div>
                            <button class="login100-form-btn">
                                Login
                            </button>
                        </div>
                    </div>

                    
                </form>
            </div>
        </div>
    </div>
}

_Layout.cshtml (master page)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/font-awesome.css" rel="stylesheet" />
    <link href="~/Content/custom.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link href="~/Content/Site.css" rel="stylesheet" type='text/css' />

    @*login page*@
    <link rel="icon" type="image/png" href="images/icons/favicon.ico" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/fonts/iconic/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css" />
    <link href="~/vendor/animate/animate.css" rel="stylesheet" type="text/css" />
    <link href="~/vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" type="text/css" />
    <link href="~/vendor/animsition/css/animsition.min.css" rel="stylesheet" type="text/css" />
    <link href="~/vendor/daterangepicker/daterangepicker.css" type="text/css" rel="stylesheet" />
    <link href="~/vendor/select2/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/util.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/main.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.metisMenu.js"></script>
    <script src="~/Scripts/custom.js"></script>


    @RenderBody()

    @*login page*@
    <div id="dropDownSelect1"></div>
    <script src="~/vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="~/vendor/animsition/js/animsition.min.js"></script>
    <script src="~/vendor/bootstrap/js/popper.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/vendor/select2/select2.min.js"></script>
    <script src="~/vendor/daterangepicker/moment.min.js"></script>
    <script src="~/vendor/daterangepicker/daterangepicker.js"></script>
    <script src="~/vendor/countdowntime/countdowntime.js"></script>
    <script src="~/Scripts/main.js"></script>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

site.css

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

how to remove the empty space top of the page?

which place need to correction

2 answers

  • answered 2020-09-14 05:43 Tushar Sakhiya

    I think here is the issue that i can see in css of body https://prnt.sc/ugthje

  • answered 2020-09-14 05:46 user14272892

    try it:

    body { 
       padding-top: 0; 
       padding-bottom: 20px;
    }
    

    set padding-top to 0 for body or simply remove it.