Question

There is a gap above the top of the image. What is causing it? I want the image to appear from the very top of the page. The image covers takes up half the width of the webpage.

HTML（这里我添加了导航栏，并且有一个包含图像的div标签。）

<nav class="navbar">
    <ul>
        <li><a href ="#home"><div class ="line-effect">Home</div></a></li>
        <li><a href ="#about"><div class="line-effect">About</div></a></li>
        <li><a href ="#portfolio"><div class="line-effect">Portfolio</div></a></li>
    </ul>   
</nav>


<div class="bg-image">
    <img src="newvec.png"  height="800px" width="750px">
</div>

CSS（这是导航栏的样式。没有样式应用于图像。“ box：sizing：border-box”属性已应用于整个文档。）

   .navbar{
    padding:5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position:fixed;
    padding:50px 10px;
    width:100%;
    height:8vh;  
    }

  .navbar ul{
    display: flex;
    list-style: none;
    padding: 20px 40px; 
    }

   .navbar ul li a{
    font-family: Nunito;
    color:black;
    text-decoration: none;
    font-size: 20px;
    display: block;
    padding: 5px 25px;
    }

Answer 1

您是否检查了<body>标签？如果您没有使用reset.css，则margin标记中有标准的<body>。
只需尝试添加

body {
  margin : 0;
}

在您的css标签上。

顶部CSS中未显示背景图片

1 个答案: