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;
}

谢谢，SO！

Answer 1

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

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

如果要允许div与其他元素包装，可以将显示设置为inline-block：

div.download
{
    display: inline-block;
}