html 我不能移动图像到左上角的屏幕与css

r9f1avp5 于 2022-12-16 发布在其他

关注(0)|答案(3)|浏览(179)

我试图使用我的徽标在网页上的图像，并把它放在我的网页的左上角，但它似乎有一个空间的顶部和左侧的图像，我希望它齐平就像dropbox.com这样做这里的html：'

<body>
    <nav>
      <div class="logo">
        <a href="index.html"><img src="img/pd3-1.jpg"></a>
      </div>
    </nav> 
</body>

'
我尝试过很多方法，比如删除填充/边距、改变位置、浮动，我是新来的编程人员，所以我似乎无法修复它或找到答案

3条答案

删除body元素的默认边距：

body {margin:0;}

使用位置相对和位置绝对可能是你的答案.我们的位置容器相对，允许我们的绝对定位是相对于这个容器.我添加了一个背景，所以你可以看到这位置的徽标更好.

nav{width:100%;position:relative;}
.logo{position:absolute;top:0;left:0;width:150px;height:150px;background:#ededed;}

<body>
    <nav>
      <div class="logo">
        <a href="index.html"><img src="img/pd3-1.jpg"></a>
      </div>
    </nav> 
</body>

还要确保你的css是链接在你的索引文件的头部，因为没有这个样式将不会传递到页面。
最终结果在jsfiddle上与Jacob一起检查了这个问题后，我们确定他没有在head中包含css。将css添加到站点的head中修复了这个问题，自定义样式现在可以正确地为图像设置样式了。

您应该删除父元素的空格。您是否删除了所有父元素？
例如：

body, body * {
  margin: 0;
  padding: 0;
}