javascript - 如何设置容器 div 的宽度和高度？

Question

我有以下内容：

<div id="container">
    <img src="pic.png">
</div>

其样式如下：

#container {
    height: 50px;
    width: 50px;
}

除此之外，我还有一些 javascript 骇客通过设置margin-top和margin-left.

当我在 Chrome 网络检查器中查看这个时，很明显包含的 div 不是从其父级的顶部开始的。我怀疑图像是相对于容器 div 的父级定位的。

这样做的问题是我希望容器 div 成为单击事件的目标，例如拖动。div 仅从图像顶部开始，当我希望它从图像上方开始时，并将边距空间作为容器的一部分。有什么建议吗？

score 2 · Accepted Answer

@plalx 是正确的，您使用了错误的选择器，您应该这样做：

#container{
    width: 50px;
    height: 50px;
    padding: 5px;
}

padding是您通过使 div 比点击图像更大而寻找的东西。margin确定页面上的位置，padding确定页面上超出您和属性的空间。heightwidth

请参阅http://jsfiddle.net/VRJUc/。如果您打开元素检查器（chrome）并查看 div 的实际大小，您会发现这实际上是60x60因为我5px在每一侧都添加了填充。

1 回答 1