时间戳

首页 > 解决方案 > html页面末尾的空白是什么引起的？

python - html页面末尾的空白是什么引起的？

问题描述

我的 html 页面末尾有一个空格，我不知道是什么原因造成的。在我的 css 文件中，我将身体高度设置为 120vh，正如您从 css 文件中看到的那样。我不知道这个额外的空间有什么用，因为身体被内容占据了。我正在尝试使我的网站具有响应性，但这会阻止我这样做。

底部留白

.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'style.css' %}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="shortcut icon" href="{% static 'favicon.png' %}" type="image/png">
<title>Profile</title>
</head>
<body>
<div class="glass">
    <div class="navbar">
        <div class="logo">
            <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
        </div>
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Artist</a></li>
            <li><a href="#">Analytics</a></li>
        </ul>
        <div>

        </div>
    </div>
    <div class="container">
        <div class="row-1">
            <h2>Profile Settings</h2>
            <div class="d-flex flex-column align-items-center text-center p-3 py-5">
                <img class="rounded-circle mt-5" width="150px" src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg">
                <span class="font-weight-bold">Edogaru</span>
                <span class="text-black-50">edogaru@mail.com.my</span>
                <span> </span>
            </div>
        </div>
        <div class="row-2">
            <div class="p-3 py-5">
                <div class="row mt-2" style="flex-grow: 5">
                    <div class="col-md-6"><label class="labels">Name</label><input type="text" class="form-control" placeholder="first name" value=""></div>
                    <div class="col-md-6"><label class="labels">Surname</label><input type="text" class="form-control" value="" placeholder="surname"></div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-12"><label class="labels">Mobile Number</label><input type="text" class="form-control" placeholder="enter phone number" value=""></div>
                    <div class="col-md-12"><label class="labels">Address Line 1</label><input type="text" class="form-control" placeholder="enter address line 1" value=""></div>
                    <div class="col-md-12"><label class="labels">Address Line 2</label><input type="text" class="form-control" placeholder="enter address line 2" value=""></div>
                    <div class="col-md-12"><label class="labels">Postcode</label><input type="text" class="form-control" placeholder="enter address line 2" value=""></div>
                </div>
            </div>
        </div>
        <div class="row-3">
            <div class="p-3 py-5">
                    <div class="col-md-12"><label class="labels">State</label><input type="text" class="form-control" placeholder="enter address line 2" value=""></div>
                    <div class="col-md-12"><label class="labels">Area</label><input type="text" class="form-control" placeholder="enter address line 2" value=""></div>
                    <div class="col-md-12"><label class="labels">Email</label><input type="text" class="form-control" placeholder="enter email" value=""></div>
                    <div class="col-md-12"><label class="labels">Education</label><input type="text" class="form-control" placeholder="education" value=""></div>
                <div class="row mt-3">
                    <div class="col-md-6"><label class="labels">Country</label><input type="text" class="form-control" placeholder="country" value=""></div>
                    <div class="col-md-6"><label class="labels">State/Region</label><input type="text" class="form-control" value="" placeholder="state"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="pages">
        <a href="#" class="previous">&laquo; Previous</a>
        <a href="#">1</a>
        <a href="#" class="next">Next &raquo;</a>
    </div>
</div>
</body>
</html>

css 文件

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background-image: url('TheMachine Images/Background color.png');
background-repeat: no-repeat;
background-size: cover;
height: 120vh;
width: 100%;
padding-top: 30px;
}

body::before,
body::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 700;
width: 100%;
opacity: 0.4;
}

body::before{
clip-path: circle(30% at left 20%);
background: linear-gradient(135deg, #8eb5ee 20%, #8eb5ee 100% );
}

body::after{
clip-path: circle(25% at right 80%);
background: linear-gradient(135deg, #36375a 20%, #8eb5ee 100% );

}

.glass{
height: 102vh;
width: 90%;
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
font-family: 'Poppins', sans-serif;
color: #fff;
margin: auto;
top: 20px;
border-radius: 25px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.navbar{
width: 100%;
display: flex;
padding: 35px 50px 0;
justify-content: space-between;
}

.logo img{
width: 100px;
height: 100px;
object-fit: contain;
object-position: top;
z-index: 8;
}

.navbar .menu{
display: flex;
}

.navbar .menu li{
list-style: none;
margin: 0 6px;
}

.navbar .menu a{
text-decoration: none;
color: #fff;
font-size: 17px;
font-weight: 500;
transition: all 0.3s ease;
}

.navbar .menu a:hover{
 color: #f2f2f2;
 }

.container{
display: flex;
flex-wrap: wrap;
height: 70%;
padding-left: 50px;
padding-right: 50px;
}

.row-1{
border-right: 1px solid #fff;
width: 240px; 
}

.row-2{
 border-right: 1px solid #fff;
 width: 397px;
 }

.row-3{
width: 225px;
object-fit: contain;
 }

.text-center {
text-align: center!important;
}

.py-5 {
padding-top: 3rem!important;
padding-bottom: 3rem!important;
height: 418px;
}
.p-3 {
padding: 1rem!important;
}
.align-items-center {
align-items: center!important;
}
 .flex-column {
 flex-direction: column!important;
 }
.d-flex {
 display: flex!important;
 }

.mt-2 {
flex-grow: 5;
margin-top: 0;
}

.mt-3 {
margin-top: 0;
}

.row {
display: flex;
flex: 1 0 100%;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x)/ -2);
margin-left: calc(var(--bs-gutter-x)/ -2);
object-fit: scale-down;
}

.py-5 {
padding-top: 3rem!important;
padding-bottom: 3rem!important;
justify-content: center;
}


.p-3 {
padding: 1rem!important;
justify-content: center;
}

.form-control {
display: block;
width: 364px;
min-height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
font-family: 'Poppins', sans-serif;
line-height: 1.5;
color: #495057;
border: 1px solid #ced4da;
background-color: #fff;
background-clip: padding-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
button, input {
overflow: visible;
}
.button, input, optgroup, select, textarea {
 margin: 0;
 font-family: inherit;
 font-size: inherit;
 line-height: inherit;
 }

.pages{
position: absolute;
text-align: center;
align-content: center;
right: 110px;
}

a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}

a:hover {
background-color: #ddd;
color: black;
}

.previous {
background-color: #f1f1f1;
color: black;
}

.next {
background-color: #04AA6D;
color: white;
}

标签： pythonhtmlcssdommedia-queries

解决方案

推荐阅读