如何制作分隔符的全窗口页面高度边框

Question

我正在尝试创建一个网站的登录页面，https://essaydapp.com提交并尝试进入申请。我试图模仿他们的设计(见链接)，但我遇到了一些问题：

屏幕截图：

1. https://imgur.com/w2GAphF
   
2. https://imgur.com/rimWY0s
   

在第一张屏幕截图中，你可以看到小的1px虚线边框，我希望它是整个页面的高度，而不仅仅是表单的高度。在第二张截图中，你可以在页面的边缘和顶部看到白色，但我也希望它是蓝色的

感谢您提前提供的帮助。

form {
/*border: 10px solid #1acebc;*/
padding: 28px;
border-left: 1px solid black;
border-left-style: dashed;
border-right: 1px solid black;
border-right-style: dashed;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
img {
display: block;
margin: 0 auto;
padding-bottom: 60px;
padding-top: 30px;
width: 300px;
height: 300px;
}
body {
background-color: #e7f3f6;
/*border-left: 250px solid #007da5;
border-right: 250px solid #007da5;*/
border-left: 175px solid #007da5;
border-right: 175px solid #007da5;
padding-top: 175px;
padding-bottom: 215px;
}

<form>
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>

Answer 1

此代码从左到右删除任何填充。我希望这就是你想要的。

body{
border: 1px dashed;
backgroud-color: #e7f3f6;
margin-left: 0px;
margin-right: 0px;
}

Answer 2

您现有的代码有些混乱。相反，我建议使用以下弹性盒解决方案

body {
padding: 0;
margin: 0 auto;
background-color: #007da5;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
form {
display: flex;
width: 75%; /*Set the width required*/
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e7f3f6;
border-left: 1px dashed black;
border-right: 1px dashed black;
}
img {
width: 300px;
height: 300px;
padding-bottom: 60px;
padding-top: 30px;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 85%;
}
input[type=text],
input[type=password] {
width: 85%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}

<form>
<img src="https://i.imgur.com/ihZBCxx.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>