I am seeking guidance on how to eliminate the blank space above my login page. I cannot pinpoint exactly where this space is originating from. When I integrated a login page into my MVC project, I noticed an empty space at the top of the page that I want to remove.
For reference, please see the screenshot https://i.sstatic.net/hpjZm.png
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 href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f091b092de93">[email protected]</a>">
<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
truncate terms that are too long for the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements as they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Could someone advise me on removing the excess space at the top of the page? Which aspect should I address to achieve this?