html - div 没有占用它所有的物理空间

Question

在视觉上，div 元素按预期显示。然而，实际的 div(包装在 a 链接中)横跨整个页面。这是我的意思的一个例子:

按钮是一个图像文件，如果有帮助的话。

HTML:

<a href="../SpeedUp.zip">
    <div class=download>
        <img class=download src="../img/download.png"></img>
    </div>
</a>

CSS:

div.download {
  height: 100px;
  width: 200px;
  cursor: pointer;
  background: linear-gradient(#8ab081, #77ab59);
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 10px;
  padding: 15px;
}

div.download:hover {
  background: linear-gradient(#8db87c, #88aa8a);
}

img.download {
  height: 100px;
  width: 200px;
}

谢谢，太好了!

Answer 1

div 是 block 元素，这意味着它们不能与任何其他元素占据同一行。

当您将元素的宽度更改为仅为 200px 时，您的浏览器会自动将边距直接放置在 div 的右侧以填充该行的其余空间。

如果想让div与其他元素包裹起来，可以设置display为inline-block:

div.download
{
    display: inline-block;
}