如题body上方有空白导致出现了滚动条,怎么删除空白
图片如下
jsp页面代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="main">
<div class="user"><a href="stu_login.jsp">学生用户</a></div>
<div class="user"><a href="tea_login.jsp">教师生用户</a></div>
<div class="user"><a href="stu_login.jsp">管理员用户</a></div>
</div>
</body>
</html>
css代码如下
html,body{
background: #ddebf3;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
font-family: kaiti, serif;
}
.main{
background: #ddebf3;
height: 500px;
width: 400px;
margin: 10% auto;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 24px;
border-radius: 5%;
box-shadow: 20px 20px 20px #c7d4db,
-20px -20px 20px #f3ffff;
}
.user{
height: 60px;
width: 200px;
margin: 30px 100px;
line-height: 60px;
border: none;
border-radius: 30px;
background: #ddebf3;
box-shadow: inset 15px 15px 10px #c7dbd4,
inset -10px -10px 10px #f3ffff;
}
a:link {text-decoration: none; color: blue;}
a:visited {text-decoration: none; color: darkblue;}
a:hover {text-decoration: none; color: red;}
a:active {text-decoration: none; color: white;}