Question

我要删除登录页面上方的空白

我不知道该空间到哪个地方

我在mvc项目中添加了一个登录页面，默认情况下，页面顶部有空白

我想删除页面顶部的空白区域

查看此参考

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（母版页）

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

如何删除页面顶部的空白区域？

哪些地方需要更正

Answer 1

我认为这是我可以在body的css中看到的问题 https://prnt.sc/ugthje

Answer 2

尝试：

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

将主体的padding-top设置为0或将其删除。

如何删除页面顶部的空白区域？

2 个答案: