Question

尽管将所有边距和填充设置为0，我突然发现处理我的html＆amp; css使用预备，在我的上一个项目下添加额外（不需要的）空间，例如。页脚。在运行相同的html＆amp;直接来自Notepad ++的css，不这样做（谢天谢地）。有人可以解释为什么会发生这种情况，因为我最终将使用Prepos并从本地主机运行。这是HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf=8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="style.css">
    </head>

  <body>


            <header>header
            </header>

            <div class="wrapper">wrapper1
            </div>
            <div class="wrapper">wrapper2
            </div>

            <footer>footer
            </footer>

  </body>
 </html>

这是CSS：

html{
margin: 0;
padding: 0;
border: 3px solid green;
}

body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border: 3px solid lightblue;
height: 100vh;
}


header{
flex: 1;
height: 50%;
background-color: red;
border: 3px solid black;
}

.wrapper{
flex: 1;
height: 20%;
background-color: blue;
border: 3px solid black;
}

footer{
height: 5%;
position: absolute:
bottom: 0;
background-color: orange;
margin: 0;
padding: 0;
}

以下是运行相同代码的图像，首先来自file：///，另一个来自localhost：

（编辑：添加）是否可能与预制添加的 prepros.cfg 文件有关？我也在使用Prepros的试用版 - 这可能导致问题吗？希望对此事有任何澄清。注意：以上是我尝试过的每个浏览器（Chrome，Firefox和Opera）的差异。

预处理器在最后一个div / footer下添加额外（不需要的）空间

0 个答案: